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

VoiceOver annonce « Log in, button » - ne correspondant pas à l'étiquette visible « Sign In »

Voice Control - 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 »

VoiceOver annonce « Sign In, button » - correspondant à l'étiquette visible

Voice Control - 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 important pour les utilisateurs
• Faites correspondre le texte visible : si les utilisateurs voyants peuvent voir un bouton « Sign in », assurez-vous que les lecteurs d'écran annoncent également « Sign in »
• Il est acceptable d'ajouter du contexte supplémentaire : « Save » peut devenir « Save document »
• Ne laissez jamais de mots visibles de côté : les lecteurs d'écran devraient annoncer un bouton « Search catalog », pas juste « Search »

Impact sur les utilisateurs

Les personnes utilisant des technologies d'assistance comme VoiceOver ou ayant une basse vision sont les plus impactées par les problèmes détectés. Les problèmes de Label dans le nom peuvent contribuer à une expérience confuse ou conflictuelle entre l'annonce de VoiceOver et le contenu à l'écran.

Si un bouton a un texte visible indiquant « Sign In », VoiceOver devrait aussi annoncer « Sign In » — et non quelque chose de différent, comme « Log in ».

Remarque : Selon le langage de programmation, la propriété « name » d'un élément peut s'appeler différemment. En Swift et React Native, par exemple, elle est appelée étiquette d'accessibilité.

Confirmer le problème du Label dans le nom

1. Activez VoiceOver
2. Essayez de vous concentrer sur l'élément
3. L'un des cas suivants se produira :

• Inaccessible : Le texte annoncé par VoiceOver est différent du texte visible de l'élément
  • Accessible : Le texte annoncé par VoiceOver est le même ou inclut le texte visible de l'élément
• Accessible : VoiceOver annoncera le texte visible de l'élément.

Corriger les problèmes

Pour résoudre les problèmes de Label dans le nom, définissez un nom pour l'élément qui correspond ou inclut 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, à lui seul, n'indique pas explicitement aux utilisateurs de TA (par exemple, un lecteur d'écran) l'action de l'élément, il est alors bon d'élargir le nom accessible pour inclure plus de contexte. Par exemple :

• Étiquette visible : « Inbox, 5 », Nom : « Inbox, 5 unread messages »
• Étiquette visible : « Delete », Nom : « Delete User Profile »

UIKit

Dans le storyboard :

1. Sélectionnez l'élément avec un LabelInName problème
2. Assurez-vous que le panneau d'inspection est visible
3. Sélectionnez l'inspecteur d'identité
4. Sous Accessibilité, il y a une catégorie appelée « Label ». Entrez une étiquette qui correspond exactement ou inclut tout le texte visible.

Dans le code :

Trouvez où l'étiquette d'accessibilité a été définie et assurez-vous que la valeur de l'étiquette d'accessibilité corresponde ou inclut tout le texte visible de l'élément.

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

SwiftUI

Définissez une étiquette d'accessibilité qui correspond ou contient le texte visible.

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

React Native

La propriété accessibilityLabel doit soit correspondre, soit contenir le texte visible.

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

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

Pour les éléments interactifs sans titre, utilisez une vue touchable qui contient les composants de contrôle et de texte. De cette manière, l'élément texte devient l'étiquette visible pour le contrôle. Définissez l'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' }}
        ios_backgroundColor={'lightgray'}
        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 pourriez vouloir que le texte annoncé par VoiceOver dise « Carte Visa se terminant par 1-2-3-4 ». Comme le texte sur le bouton ne correspond pas au nom annoncé par VoiceOver, 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 réussite 2.5.3 - Label in Name
• Exigences - 2.5.3.a Label in Name

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

Autres ressources

• Directives pour l'accessibilité des contenus Web (WCAG) 2.1, Recommandation W3C
  • Critère de réussite 2.5.3 - Label in Name
• Documents de compréhension WCAG 2.1
  • Comprendre 2.5.3 A - Label in Name