É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 cette règle à partir du tableau de bord mobile ou en ignorant la règle dans les tests écrits pour iOS.

Apprenez comment désactiver les règles à partir du tableau de bord mobile.

Impact

Les utilisateurs de VoiceOver s'attendent à ce que le nom accessible soit annoncé en premier lorsqu'ils interagissent 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 VoiceOver
2. Focaliser l'élément
3. L’une des situations suivantes se produira :
   • Inaccessible : VoiceOver annoncera un autre texte avant d'annoncer le texte du contrôle actif
   • Accessible : VoiceOver 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 l'étiquette d'accessibilité du contrôle.

UIKit

Dans le storyboard :

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

En code :

Recherchez l'emplacement où l'étiquette d'accessibilité a été définie et vérifiez que la accessibilityLabel valeur correspond ou commence par tout le texte visible du composant.

button.title = "Login"
button.accessibilityLabel = "Login to Your Account"

SwiftUI

Assurez-vous de définir une étiquette d’accessibilité qui correspond ou commence par tout le texte visible du composant.

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

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>