Etichetta nel Nome

Scopri come stiamo usando 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 Fallimento ❌

Il pulsante name è "Log in"

VoiceOver annuncia "Log in, pulsante" - non corrisponde all'etichetta visibile "Sign In"

Voice Control - L'utente dice "Sign In"
Questo non attiverà il pulsante perché il suo nome è "Log in", non "Sign In"

Esempio di Successo ✅

Il pulsante name è "Sign In"

VoiceOver annuncia "Sign In, pulsante" - corrisponde all'etichetta visibile

Voice Control - L'utente dice "Sign In"
Questo attiva il pulsante perché il nome corrisponde all'etichetta visibile

A Colpo d'Occhio

• Questa regola ha un impatto serio per gli utenti
• Abbina il testo visibile: Se gli utenti vedenti possono vedere un pulsante "Sign in", assicurati che i lettori di schermo annuncino anche "Sign in"
• Va bene aggiungere contesto extra: "Salva" può diventare "Salva documento"
• Non lasciare mai fuori le parole visibili: I lettori di schermo dovrebbero annunciare un pulsante "Cerca catalogo", non solo "Cerca"

Impatto sugli Utenti

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

Se un pulsante ha un testo visibile che dice "Sign In", VoiceOver dovrebbe anche annunciare "Sign In" — non qualcosa di diverso, come "Log in".

Nota: A seconda del linguaggio di programmazione, la proprietà 'nome' per un elemento potrebbe essere chiamata in modo diverso. In Swift e React Native, per esempio, si chiama etichetta di accessibilità.

Confermare il Problema di Etichetta nel Nome

1. Attiva VoiceOver
2. Prova a focalizzarti sull'elemento
3. Accadrà una delle seguenti cose:

• Inaccessibile: Il testo annunciato da VoiceOver è diverso dal testo visibile dell'elemento
  • Accessibile: Il testo annunciato da VoiceOver è lo stesso o include il testo visibile dell'elemento
• Accessibile: VoiceOver annuncerà il testo visibile dell'elemento.

Risolvi 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 di AT (e.g. lettore di schermo) l'azione dell'elemento, allora sarebbe una buona idea espandere il nome accessibile per includere più contesto. Per esempio:

• Etichetta Visibile: “Inbox, 5”, Nome: “Inbox, 5 messaggi non letti”
• Etichetta Visibile: “Elimina”, Nome: “Elimina Profilo Utente”

UIKit

Nello storyboard:

1. Seleziona l'elemento con un problema di LabelInName
2. Assicurati che il Pannello Ispettore sia visibile
3. Seleziona l'Ispettore Identità
4. Sotto Accessibilità, c'è una categoria chiamata "Etichetta". Inserisci un'etichetta che corrisponda esattamente o includa tutto il testo visibile.

Nel codice:

Trova dove è stata impostata l'etichetta di accessibilità e assicurati che il valore dell'etichetta di accessibilità corrisponda o contenga tutto il testo visibile dell'elemento.

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

SwiftUI

Imposta un'etichetta di accessibilità che corrisponda o contenga il testo visibile.

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

React Native

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

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

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Per elementi interattivi senza titolo, utilizza una vista toccabile che contenga i componenti di controllo e testo. In questo modo, l'elemento di testo diventa l'etichetta visibile per il controllo. Imposta il accessibilityLabel dell'elemento contenitore per corrispondere o contenere 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' }}
        ios_backgroundColor={'lightgray'}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

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

Posso ignorare questa regola?

Label In Name ha un Impatto serio per gli utenti, e raccomandiamo di prendere provvedimenti per risolvere questo problema, tranne in casi rari. Ad esempio, se hai un pulsante con testo visibile che dice "Carta Visa xxxx-xxxx-xxxx-1234" potresti voler impostare il testo annunciato da VoiceOver per dire "Carta Visa terminante in 1-2-3-4". Poiché il testo sul pulsante non corrisponde al nome annunciato da VoiceOver, ciò 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
• Documenti di Comprensione WCAG 2.1
  • Comprendere 2.5.3 A - Label in Name