Étiquette dans le nom

Une vue accessible doit garantir que son nom inclut son étiquette visible.

Impact

Les utilisateurs de VoiceOver devraient avoir accès aux mêmes informations visibles à l'écran. Chaque fois que le texte d’un contrôle est mis à jour, mettez à jour l’étiquette d’accessibilité pour contenir le nouveau texte.

Confirmation

1. Activer VoiceOver
2. Focalisez-vous sur l'élément
3. L’une des situations suivantes se produira :
   • Inaccessible : VoiceOver annoncera le texte qui ne correspond pas au texte visible du contrôle actif.
   • Accessible : VoiceOver annoncera le texte contenant le texte visible du contrôle actif.
   • Accessible : VoiceOver annoncera le texte visible du contrôle actif.

Comment corriger

Un problème détecté par cette règle est causé par une partie ou la totalité du texte visible manquant dans l'étiquette d'accessibilité du contrôle.

UIKit

Dans le storyboard :

1. Sélectionnez l'élément présentant un LabelInName problème
2. Assurez-vous que le panneau des inspecteurs est visible
3. Sélectionnez l'Identity Inspector
4. Sous Accessibilité, il existe une catégorie appelée « Étiquette ». Saisissez un libellé qui correspond exactement ou contient tout le texte visible.

En code :

Recherchez où le libellé d'accessibilité a été défini et assurez-vous que la valeur du libellé d'accessibilité correspond ou contient tout le texte visible du composant.

button.title = "Login"
button.accessibilityLabel = "Submit login"

SwiftUI

Définissez une étiquette d’accessibilité qui correspond ou contient le texte visible du composant.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}.accessibility(label: Text("Main Menu"))

React Native

La propriété accessibilityLabel doit correspondre ou contenir 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'
/>

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

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Dark Mode'
   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>