Nom du contrôle actif

Toute vue interactive doit avoir un nom accessible disponible pour les technologies d'assistance telles que VoiceOver et Voice Control.

Impact

Les personnes utilisant VoiceOver sont les plus touchées. Un élément de contrôle sans nom ne transmettra pas le contexte complet ou l’objectif à la personne qui interagit avec le contrôle.

Confirmation

1. Activer VoiceOver
2. Mettez le contrôle en évidence
3. L’une des situations suivantes se produira :
   • Inaccessible : Il n'annoncera pas son nom, seulement son rôle et sa valeur s'il est présent.
   • Accessible : Il annoncera son nom dans VoiceOver.

Comment corriger

UIKit

Pour résoudre un problème détecté par cette règle, ajoutez un [term] accessibilityLabel au contrôle.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Assurez-vous que le texte du contrôle est significatif ou fournissez un [term] accessibilityLabel si davantage de contexte est nécessaire.

Cas d'utilisation : bouton avec une image pour son étiquette

Assurez-vous que l'image porte un nom significatif. Sachez que cela ne sera pas une option lors de la prise en charge de plusieurs langues. Si le nom n'est pas viable, définissez un [term] accessibilityLabel sur l'image.

Vous pouvez également combiner le contrôle et ses sous-vues pour créer un seul élément. Si aucun texte significatif n'est disponible, définissez un [term] accessibilityLabel sur l'ensemble de la vue comme indiqué ci-dessous.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
}

React Native

Pour résoudre un problème détecté par cette règle, ajoutez un [appropriate term or phrase] accessibilityLabel au composant de contrôle.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Lorsque des éléments sont regroupés dans une vue contenante, ajoutez la propriété accessible et la propriété accessibilityLabel à la vue contenante :

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>