Etichetta all'inizio
Scopri come stiamo utilizzando l'intelligenza artificiale per questa regola!
Cosa Verifichiamo
Se un elemento interattivo ha un'etichetta visibile, questa dovrebbe essere all'inizio del nome annunciato dalla tecnologia assistiva (AT), prima di qualsiasi informazione aggiuntiva.
Esempio di Fallimento ❌
Il pulsante name è "Accedi al conto"
TalkBack annuncia "Accedi al conto, pulsante" — l'etichetta visibile "Accedi" non è all'inizio
Voice Access - L'utente dice "Accedi"
Ciò potrebbe non attivare il pulsante poiché il nome inizia con "Account", non con "Accedi"
Esempio di Successo ✅
Il pulsante name è "Accedi al conto"
TalkBack annuncia "Accedi al conto, pulsante" - l'etichetta visibile "Accedi" viene per prima
Voice Access - L'utente dice "Accedi"
Questo attiva il pulsante perché il nome inizia con l'etichetta visibile
In Sintesi
- Questa regola ha un impatto minore per gli utenti, applicando una Best Practice del WCAG
- Testo visibile prima: Iniziare sempre il nome di un elemento con ciò che gli utenti vedenti percepiscono sullo schermo
- Contesto in secondo piano: aggiungere informazioni utili al nome dell'elemento dopo il testo visibile
Impatto sugli Utenti
Le persone che usano la tecnologia assistiva devono comprendere rapidamente cosa fa un elemento ed essere in grado di interagire facilmente con esso. Quando parole extra vengono prima del nome accessibile, ciò rallenta la navigazione e rende la tua app meno efficiente per gli utenti AT.
- Talkback - Alcuni utenti passano tra le modalità - usando sia uno screen reader che l'input vocale. La coerenza nel posizionare il testo visibile all'inizio del nome riduce la confusione quando si confronta ciò che un utente vedente può percepire rispetto a ciò che è annunciato da Talkback.
- Voice Access - I motori di riconoscimento vocale spesso si basano sull'inizio di un nome accessibile per determinare quale elemento l'utente sta mirando. Mettere l'etichetta visibile all'inizio del nome accessibile rende la corrispondenza inequivocabile e riduce la possibilità che un utente non riesca ad attivare un elemento. Una buona pratica che consigliamo è avere solo il testo visibile di un elemento all'interno del nome, e mettere le informazioni secondarie all'interno del valore accessibile, suggerimento o ruolo.
Nota: A seconda del linguaggio di programmazione, la proprietà 'name' per un elemento potrebbe essere chiamata in modo diverso. Per XML o Compose, viene chiamata descrizione del contenuto. Per React Native, viene chiamata etichetta di accessibilità.
Conferma Problema Etichetta all'Inizio
- Attiva TalkBack
- Metti a fuoco l'elemento
- Accadrà una delle seguenti:
- Inaccessibile: Il testo inizialmente annunciato da TalkBack è diverso dal testo visibile dell'elemento
- Accessibile: TalkBack annuncerà per primo il testo visibile dell'elemento
Risolvi Problemi
Per risolvere i problemi di Etichetta all'inizio, corrispondi esattamente al testo del contenuto e al nome accessibile quando possibile. Evita l'uso di parole superflue come "Clicca qui per..." o "Tocca per...", e nomina l'elemento in modo che dica esplicitamente all'utente la sua azione.
A volte è necessario ampliare il nome accessibile di un elemento per includere più contesto. Ad esempio:
- Etichetta Visibile: “Posta in arrivo, 5”, Nome: “Posta in arrivo, 5 messaggi non letti”
- Etichetta Visibile: “Elimina”, Nome: “Elimina profilo utente”
Per evitare problemi di Etichetta all'inizio in casi come questi, assicurati che il testo visibile dell'elemento venga primo nel suo nome accessibile.
XML
Per un pulsante con testo visibile che dice "Invia":
<Button
android:id="@+id/email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/xlg"
android:text="Send"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/divider2" />Il testo visibile per il pulsante viene prima nella sua descrizione del contenuto, e ulteriori informazioni seguono.
val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"Compose
Per un elemento di testo cliccabile con testo visibile che dice "Invia", il testo visibile per il pulsante viene prima nel suo contentDescription, e ulteriori informazioni seguono.
Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")React Native
La proprietà accessibilityLabel dovrebbe iniziare con il testo visibile dell'elemento.
Di default, un pulsante utilizzerà il suo titolo come suo accessibilityLabel, e quindi supererà questa regola.
<Button
title={'Menu'}
mode='contained'
accessibilityLabel='Menu'
/>Se scegli di personalizzare il accessibilityLabel per un pulsante, assicurati che inizi con il testo del title.
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>Quando si imposta esplicitamente il accessibilityLabel, assicurarsi che il accessibilityLabel inizi con il testo visibile dell'elemento.
<View style={styles.container}>
<Button title='Menu' accessibilityLabel='Menu: Tap to expand/collapse'>
</View>Posso ignorare questa regola?
La regola "Etichetta davanti" applica una migliore pratica nota dal WCAG come parte di WCAG 2.1 2.5.3 A. Questa regola ha un impatto minore e può essere ignorata se si desidera dare priorità a problemi più seri. Puoi disattivare le regole categorizzate come "Migliori pratiche" dal Mobile Dashboard, o ignorare la regola nei test scritti per Android.
Domande frequenti
Ci sono limitazioni note con questa regola?
Sì. Un errore nella regola può verificarsi quando il testo visibile di un elemento interattivo contiene un'abbreviazione (ad es. "GB", "km") o un identificatore oscurato / troncato, e l'annuncio di accessibilità consiste nelle parole rappresentate (ad es. "gigabyte", "chilometri"), anche se questo è il modello raccomandato per rendere il contenuto abbreviato o troncato adatto ai lettori di schermo.
Risorse
- Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.1, Raccomandazione W3C
- Documenti di comprensione WCAG 2.1