Etichetta Anteriore
Scopri come utilizziamo l'intelligenza artificiale per questa regola!
Cosa Controlliamo
Se un elemento interattivo ha un'etichetta visibile, questa dovrebbe trovarsi all'inizio del nome annunciato dalla tecnologia assistiva (AT), prima di qualsiasi informazione aggiuntiva.
Esempio di Errore ❌
Il pulsante name è "Accesso account"
VoiceOver annuncia "Accesso account, pulsante" - l'etichetta visibile "Accedi" non è all'inizio
Voice Control - L'utente dice "Accedi"
Questo potrebbe non attivare il pulsante poiché il nome inizia con "Account", non "Accedi"
Esempio Corretta ✅
Il pulsante name è "Accedi all'account"
VoiceOver annuncia "Accedi all'account, pulsante" - l'etichetta visibile "Accedi" viene per prima
Voice Control - 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 WCAG
- Testo visibile prima: Inizia sempre il nome di un elemento con esattamente ciò che gli utenti vedenti percepiscono sullo schermo
- Contesto in secondo piano: Aggiungi informazioni utili al nome dell'elemento dopo il testo visibile
Impatto sugli Utenti
Le persone che utilizzano tecnologia assistiva devono capire rapidamente cosa fa un elemento e poter interagire facilmente con esso. Quando ci sono parole aggiuntive prima del nome accessibile, ciò rallenta la navigazione e rende la tua app meno efficiente per gli utenti AT.
- VoiceOver - Alcuni utenti passano tra modalità — utilizzando sia un lettore di schermo 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 con ciò che viene annunciato da VoiceOver.
- Controllo Vocale - I motori di riconoscimento vocale spesso si basano sull'inizio di un nome accessibile per determinare quale elemento l'utente sta mirando. Inserire 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 best practice consigliata è includere nel nome solo il testo visibile dell'elemento, e inserire informazioni secondarie nel valore accessibile o nei suggerimenti.
Nota: A seconda del linguaggio di programmazione, la proprietà 'name' per un elemento può essere chiamata in modo diverso. In Swift e React Native, ad esempio, viene chiamata etichetta di accessibilità.
Conferma Problema Etichetta Anteriore
- Attiva VoiceOver
- Focalizza l'elemento
- Succederà una delle seguenti cose:
- Inaccessibile: Il testo annunciato per primo da VoiceOver è diverso dal testo visibile dell'elemento
- Accessibile: VoiceOver annuncerà prima il testo visibile dell'elemento
Correggi Problemi
Per risolvere i problemi di Etichetta Anteriore, concorda esattamente il contenuto del testo e il nome accessibile quando possibile. Evita l'uso di parole superflue come "Clicca qui per..." o "Tocca per...", e nomina l'elemento in modo che comunichi 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 Anteriore in casi come questi, assicurati che il testo visibile dell'elemento venga prima nel suo nome accessibile.
UIKit
In storyboard:
- Seleziona l'elemento con un problema di
LabelAtFront - Assicurati che il Pannello degli Ispettori sia visibile
- Seleziona l'Ispettore dell'Identità.
- Sotto Accessibilità, c'è una categoria chiamata "Etichetta". Inserisci un'etichetta che corrisponda esattamente o inizi con il testo visibile.
Nel codice:
Trova dove è stata impostata l'etichetta di accessibilità e verifica che il valore di accessibilityLabel corrisponda o inizi con tutto il testo visibile dell'elemento.
button.title = "Send"
button.accessibilityLabel = "Send email"SwiftUI
Assicurati di impostare un'etichetta di accessibilità che corrisponda o inizi con tutto il testo visibile dell'elemento.
Button(action: {
openMenu()
}) {
Text("Menu")
}React Native
La proprietà accessibilityLabel dovrebbe iniziare con il testo visibile dell'elemento.
Per impostazione predefinita, un pulsante utilizzerà il suo titolo come accessibilityLabel e quindi rispetterà questa regola.
<Button
title={'Delete'}
mode='contained'
accessibilityLabel='Delete'
/>Se si sceglie di personalizzare il accessibilityLabel per un pulsante, assicurarsi che inizi con il testo del title.
<Button
title={'Log In'}
mode='contained'
accessibilityLabel='Log In to Transfer Money'
/>Per altri elementi senza un titolo esplicito, o 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 Open'>
</View>Posso ignorare questa regola?
La regola Etichetta al Fronte applica una migliore pratica indicata 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. È possibile disattivare le regole categorizzate come 'Migliore pratica' dalla dashboard mobile o ignorare la regola nei test scritti per iOS.
Risorse
- Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.1, raccomandazione W3C
- Documenti di Comprensione WCAG 2.1