Étiquette en avant

Tout texte visible d'une vue interactive doit figurer au début du nom accessible de la vue.

Cette règle applique une bonne pratique notée par WCAG dans le cadre de WCAG 2.1 2.5.3 A. Vous pouvez désactiver les règles classées comme « Meilleures pratiques » à partir du tableau de bord mobile ou en ignorant la règle dans les tests écrits pour Android.

Impact

Les utilisateurs de TalkBack s'attendent à ce que le nom accessible soit annoncé en premier lors de l'interaction avec un contrôle. En tant que bonne pratique, nous vous recommandons d'avoir un texte visible des contrôles dans le nom et toutes les autres informations dans la valeur accessible, l'indice ou le rôle.

Confirmation

1. Activer TalkBack
2. Focaliser l'élément
3. L’une des situations suivantes se produira :
   • Inaccessible : TalkBack annoncera un autre texte avant d'annoncer le texte du contrôle actif
   • Accessible : TalkBack annoncera d'abord le texte du contrôle actif

Comment corriger

Un problème détecté par cette règle est causé par le texte visible manquant au début de la description du contenu du contrôle.

XML

Pour un bouton fourni :

<Button
   android:id="@+id/email_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="@dimen/xlg"
   android:text="Send"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toBottomOf="@id/divider2" />

Exemple de passage :

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"

Exemple d'échec : Notez que le texte affiché n'est pas disponible au début de la description du contenu.

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Tap to Send Email"

Compose

Exemple de passage :

Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")

Exemple d'échec : Notez que le texte affiché n'est pas disponible au début de la description du contenu.

Text(modifier = Modifier.semantics { contentDescription = "Click to Send" }, text = "Send")

React Native

La propriété accessibilityLabel devrait débuter avec le texte visible du composant.

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

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

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

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>
For other components without an explicit title, or when setting the `accessibilityLabel` explicitly, ensure that the `accessibilityLabel` begins with the component's visible text.
```jsx
<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>