Etichetta nel Nome

Scopri come utilizziamo l'intelligenza artificiale per questa regola!

Cosa Controlliamo

Se un elemento interattivo ha un'etichetta visibile, il nome annunciato dalla tecnologia assistiva (AT) dovrebbe essere lo stesso.

Esempio di Errore ❌

Il pulsante name è "Log in"

TalkBack annuncia "Log in, pulsante" - non corrisponde all'etichetta visibile "Accedi"

Voice Access - L'utente pronuncia "Accedi"
Questo non attiverà il pulsante perché il suo nome è "Log in", non "Accedi"

Esempio Corretto ✅

Il pulsante name è "Accedi"

TalkBack annuncia "Accedi, pulsante" - corrisponde all'etichetta visibile

Voice Access - L'utente pronuncia "Accedi"
Questo attiva il pulsante perché il nome corrisponde all'etichetta visibile

In Sintesi

• Questa regola ha un impatto serio sugli utenti
• Abbinare il testo visibile: Se gli utenti vedenti possono vedere un pulsante "Accedi", assicurati che anche i lettori di schermo annuncino "Accedi"
• È accettabile aggiungere contesto extra: "Salva" può diventare "Salva documento"
• Non omettere mai parole visibili: I lettori di schermo dovrebbero annunciare un pulsante "Cerca nel catalogo", non solo "Cerca"

Impatto sugli Utenti

Le persone che utilizzano tecnologie assistive come TalkBack e/o che hanno problemi di vista sono maggiormente colpite dai problemi rilevati. I problemi di Etichetta nel Nome possono contribuire a un'esperienza confusa o conflittuale tra l'annuncio di TalkBack e il contenuto sullo schermo.

Se un pulsante ha del testo visibile che dice "Accedi", TalkBack dovrebbe anche annunciare "Accedi" — non qualcosa di diverso, come "Log in".

Nota: A seconda del linguaggio di programmazione, la proprietà 'name' per un elemento potrebbe chiamarsi differentemente. Per XML o Compose, è chiamata descrizione del contenuto. Per React Native, è chiamata etichetta di accessibilità.

Conferma Problema di Etichetta nel Nome

1. Attiva TalkBack
2. Prova a focalizzare l'elemento
3. Si verificherà una delle seguenti situazioni:
   • Inaccessibile: Il testo annunciato da TalkBack è diverso dal testo visibile dell'elemento
   • Accessibile: Il testo annunciato da TalkBack è lo stesso o include il testo visibile dell'elemento

Correggi i Problemi

Per risolvere i problemi di Etichetta nel Nome, imposta un nome per l'elemento che corrisponda o contenga il testo visibile dell'elemento.

Quando il testo visibile è descrittivo e unico, è consigliato che il nome corrisponda esattamente al testo.

Quando il testo visibile da solo non comunica esplicitamente agli utenti AT (es. lettore di schermo) l'azione dell'elemento, è una buona idea espandere il nome accessibile 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”

XML

Imposta una descrizione del contenuto che corrisponda esattamente o contenga il testo visibile. Se l'elemento è un Button o un TextView cliccabile:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text

Se l'elemento è un CheckBox, consulta Nome CheckBox.

Compose

Assicurati che il contentDescription dell'elemento corrisponda esattamente o contenga il testo visibile.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Send”
        )
    }
}

React Native

La proprietà accessibilityLabel dovrebbe corrispondere o contenere il testo visibile dell'elemento.

Per impostazione predefinita, un pulsante utilizzerà il suo titolo come suo accessibilityLabel, e quindi soddisferà questa regola.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactly

Per elementi interattivi senza titolo, utilizza una vista toccabile che contenga l'elemento e i componenti di testo. In questo modo, il testo fornito diventa l'etichetta visibile per l'elemento. Imposta il accessibilityLabel dell'elemento contenitore in modo che corrisponda o contenga il testo visibile.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Subscribe to notifications'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

Posso ignorare questa regola?

Label In Name ha un impatto significativo per gli utenti e raccomandiamo di prendere provvedimenti per correggere questo problema salvo in casi rari. Ad esempio, se hai un pulsante con il testo visibile "Visa Card xxxx-xxxx-xxxx-1234", potresti voler impostare il testo annunciato da TalkBack come "Visa Card che termina in 1-2-3-4". Poiché il testo sul pulsante non corrisponde al nome annunciato da TalkBack, questo causerebbe un fallimento per Label in Name. Ma in un caso come questo, avrebbe senso ignorare la regola. Scopri di più su ignorare le regole.

Risorse

Pagine dei corsi di Deque University

• 2.5.3 Label in Name (A)
• Criterio di successo 2.5.3 - Label in Name
• Requisiti - 2.5.3.a Label in Name

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Linee Guida per l'Accessibilità dei Contenuti Web (WCAG) 2.1, Raccomandazione W3C
  • Criterio di successo 2.5.3 - Label in Name
• Documentazione di comprensione WCAG 2.1
  • Comprensione di 2.5.3 A - Label in Name