Étiquette en tête

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, cela doit apparaître au début du nom annoncé par les technologies d'assistance (AT), avant toute information supplémentaire.

Exemple de non-conformité ❌

Le bouton name est "Connexion au compte"

VoiceOver annonce "Connexion au compte, bouton" - l'étiquette visible "Connexion" n'est pas en tête

Voice Control - L'utilisateur dit "Connexion"
Cela peut ne pas activer le bouton car le nom commence par "Compte", pas "Connexion"

Exemple de conformité ✅

Le bouton name est "Connexion au compte"

VoiceOver annonce "Connexion au compte, bouton" - l'étiquette visible "Connexion" vient en premier

Voice Control - L'utilisateur dit "Connexion"
Cela active le bouton parce que le nom commence par l'étiquette visible

En un coup d'œil

• Cette règle a un impact mineur pour les utilisateurs, en appliquant une meilleure pratique WCAG
• Texte visible d'abord : Commencez toujours le nom d'un élément par ce que les utilisateurs voyants perçoivent à l'écran
• Contexte ensuite : Ajoutez des informations utiles au nom de l'élément après le texte visible

Impact sur les utilisateurs

Les personnes utilisant des technologies d'assistance doivent comprendre rapidement ce que fait un élément et pouvoir interagir facilement avec lui. Quand des mots supplémentaires précèdent le nom accessible, cela ralentit la navigation et rend votre application moins efficace pour les utilisateurs d'AT.

• VoiceOver - Certains utilisateurs alternent entre les modalités — utilisant à la fois un lecteur d'écran et une commande vocale. La cohérence en plaçant le texte visible au début du nom réduit la confusion lors de la comparaison entre ce qu'un utilisateur voyant peut percevoir et ce qui est annoncé par VoiceOver.
• Contrôle vocal - Les moteurs de reconnaissance vocale s'appuient souvent sur le début d'un nom accessible pour déterminer quel élément l'utilisateur vise. Mettre l'étiquette visible au début du nom accessible rend l'association sans ambiguïté et réduit la possibilité qu'un utilisateur ne puisse pas activer un élément. Une meilleure pratique que nous recommandons est d'avoir uniquement le texte visible d'un élément dans le nom et de mettre les informations secondaires dans la valeur accessible, l'indice ou le rôle.

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

Confirmer le problème de l'étiquette en tête

1. Activer VoiceOver
2. Centrer l'élément
3. L'une des actions suivantes se produira :
   • Inaccessible : Le texte d'abord annoncé par VoiceOver est différent du texte visible de l'élément
   • Accessible : VoiceOver annoncera en premier le texte visible de l'élément

Corriger les problèmes

Pour résoudre les problèmes d'Étiquette en tête, faites correspondre le contenu textuel et le nom accessible exactement lorsque cela est possible. Évitez l'utilisation de mots superflus tels que "Cliquez ici pour..." ou "Tapez pour...", et nommez l'élément de manière à indiquer explicitement son action à l'utilisateur.

Il est parfois nécessaire d'élargir le nom accessible d'un élément 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 »

Pour éviter les problèmes d'Étiquette en tête dans des cas comme ceux-ci, assurez-vous que le texte visible de l'élément vient d'abord dans son nom accessible.

UIKit

Dans le storyboard :

1. Sélectionnez l'élément avec un problème de LabelAtFront
2. Assurez-vous que le panneau des inspecteurs est visible
3. Sélectionnez l'inspecteur d'identité.
4. Sous Accessibilité, il y a une catégorie appelée "Étiquette". Entrez une étiquette qui correspond exactement ou commence par le texte visible.

Dans le code :

Trouvez où l'étiquette d'accessibilité a été définie et vérifiez que la valeur de accessibilityLabel correspond exactement ou commence par tout le texte visible de l'élément.

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

Assurez-vous d'établir une étiquette d'accessibilité qui correspond ou commence par tout le texte visible de l'élément.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

React Native

La propriété accessibilityLabel devrait commencer par le texte visible de l'élément.

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

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

Si vous choisissez de personnaliser le accessibilityLabel pour un bouton, assurez-vous qu'il commence par le texte du title.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>

Pour les autres éléments sans titre explicite, ou lors de la définition explicite du accessibilityLabel, assurez-vous que le accessibilityLabel commence par le texte visible de l'élément.

<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>

Puis-je ignorer cette règle ?

La règle Étiquette à l'avant impose une meilleure pratique notée par la WCAG dans WCAG 2.1 2.5.3 A. Cette règle a un impact mineur et peut être ignorée si vous souhaitez donner la priorité à des problèmes plus sérieux. Vous pouvez désactiver les règles catégorisées comme 'Meilleure Pratique' depuis le Tableau de bord Mobile, ou en ignorer la règle dans les tests écrits pour iOS.

Ressources

• Directives pour l'accessibilité des contenus Web (WCAG) 2.1, Recommandation W3C
  • Critère de succès 2.5.3 - Étiquette dans le Nom
• WCAG 2.1 Documents explicatifs
  • Comprendre SC 2.5.3 : Étiquette dans le Nom