Étiquette dans le nom

Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !

Ce que nous vérifions

Si un élément interactif a une étiquette visible, le nom annoncé par la technologie d'assistance (TA) doit être le même.

Exemple d'échec ❌

Le bouton name est "Log in"

TalkBack annonce "Log in, bouton" - ne correspond pas à l'étiquette visible "Sign In"

Voice Access - L'utilisateur dit "Sign In"
Cela n'activera pas le bouton car son nom est "Log in", pas "Sign In"

Exemple de réussite ✅

Le bouton name est "Sign In"

TalkBack annonce "Sign In, bouton" - correspond à l'étiquette visible

Voice Access - L'utilisateur dit "Sign In"
Cela active le bouton car le nom correspond à l'étiquette visible

En un coup d'œil

• Cette règle a un impact sérieux pour les utilisateurs
• Faire correspondre le texte visible : si les utilisateurs voyants voient un bouton "Sign in", assurez-vous que les lecteurs d'écran annoncent également "Sign in"
• Il est acceptable d'ajouter du contexte supplémentaire : "Enregistrer" peut devenir "Enregistrer le document"
• Ne jamais omettre des mots visibles : les lecteurs d'écran doivent annoncer un bouton "Rechercher catalogue", pas seulement "Rechercher"

Impact sur les utilisateurs

Les personnes utilisant des technologies d'assistance, comme TalkBack, et/ou ayant une basse vision sont les plus touchées par les problèmes détectés. Les problèmes d'Étiquette dans le nom peuvent contribuer à une expérience confuse ou contradictoire entre l'annonce de TalkBack et le contenu à l'écran.

Si un bouton a un texte visible disant "Sign In", TalkBack devrait également annoncer "Sign In" — pas quelque chose de différent, comme "Log in".

Remarque : selon le langage de programmation, la propriété 'nom' d'un élément peut être appelée différemment. Pour XML ou Compose, elle est appelée une description du contenu. Pour React Native, elle est appelée une étiquette d'accessibilité.

Confirmer le problème Étiquette dans le nom

1. Activer TalkBack
2. Tenter de se concentrer sur l'élément
3. L'un des événements suivants se produira :
   • Inaccessible : Le texte annoncé par TalkBack est différent du texte visible de l'élément
   • Accessible : Le texte annoncé par TalkBack est le même ou inclut le texte visible de l'élément

Corriger les problèmes

Pour résoudre les problèmes d'Étiquette dans le nom, définissez un nom pour l'élément qui soit soit identique, soit contient le texte visible de l'élément.

Lorsque le texte visible est descriptif et unique, il est recommandé que le nom corresponde exactement au texte.

Lorsque le texte visible par lui-même ne dit pas explicitement aux utilisateurs de TA (par exemple, lecteur d'écran) l'action de l'élément, il serait judicieux d'étendre le nom accessible pour inclure plus de contexte. Par exemple :

• Étiquette visible : « Boîte de réception, 5 », Nom : « Boîte de réception, 5 messages non lus »
• Étiquette visible : « Supprimer », Nom : « Supprimer le profil utilisateur »

XML

Définir une description du contenu qui correspond exactement ou contient le texte visible. Si l'élément est un Button ou un TextView cliquable :

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

Si l'élément est un CheckBox, veuillez consulter Nom de la case à cocher.

Compose

Assurez-vous que le contentDescription de l'élément correspond exactement ou contient le texte visible.

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

React Native

La propriété accessibilityLabel devrait soit correspondre, soit contenir le texte visible de l'élément.

Par défaut, un bouton utilisera son titre comme son accessibilityLabel, et il respectera donc cette règle.

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

Pour les éléments interactifs sans titre, utilisez une vue tactile qui contient l'élément et les composants de texte. De cette manière, le texte fourni devient l'étiquette visible pour l'élément. Définissez le accessibilityLabel de l'élément contenant pour qu'il corresponde ou contienne le texte visible.

<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>

Puis-je ignorer cette règle ?

Label In Name a un Impact sérieux pour les utilisateurs, et nous recommandons de prendre des mesures pour remédier à ce problème sauf dans de rares cas. Par exemple, si vous avez un bouton avec un texte visible indiquant « Carte Visa xxxx-xxxx-xxxx-1234 », vous voudrez peut-être que le texte annoncé par TalkBack dise « Carte Visa se terminant par 1-2-3-4 ». Étant donné que le texte sur le bouton ne correspond pas au nom annoncé par TalkBack, cela entraînerait un échec pour Label In Name. Mais dans un cas comme celui-ci, il serait logique d'ignorer la règle. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de l'université Deque

• 2.5.3 Label in Name (A)
• Critère de succès 2.5.3 - Label in Name
• Exigences - 2.5.3.a Label in Name

Remarque : L'accès complet aux ressources de l'université Deque nécessite un abonnement.

Autres ressources

• Règles pour l’accessibilité des contenus Web (WCAG) 2.1, Recommandation du W3C
  • Critère de succès 2.5.3 - Label in Name
• Documents de compréhension WCAG 2.1
  • Comprendre 2.5.3 A - Label in Name