Nom de la vue active

Ce que nous vérifions

Un élément interactif doit avoir un nom accessible pour les technologies d'assistance telles que TalkBack et Voice Access.

Exemple d'échec ❌

Aucun nom défini sur l'élément interactif

TalkBack lit "Button"

Voice Access — l'utilisateur dit « Rechercher »
L'élément ne répond pas car il n'a pas de nom

Exemple de réussite ✅

`contentDescription="Search"`

TalkBack lit "Search, button"

Voice Access — l'utilisateur dit « Rechercher »
L'élément s'active car son nom correspond

En résumé

• Cette règle a un impact critique pour les utilisateurs
• Chaque élément interactif a besoin d'un nom : les boutons, les liens, les contrôles personnalisés, etc., nécessitent un nom accessible que TalkBack peut annoncer
• Si un élément interactif n'a pas de texte visible, fournissez-en un explicitement en utilisant les propriétés contentDescription ou accessibilityLabel
• Ne laissez pas TalkBack sans rien dire : un élément qui n'annonce que son rôle ou sa valeur — sans nom — ne donne aucun contexte aux utilisateurs sur ce qu'il fait

Impact sur les utilisateurs

Les personnes utilisant TalkBack sont les plus concernées. Un élément interactif sans nom ne transmettra pas le contexte ou l'objectif complet à la personne qui l'utilise.

Lorsqu'un élément interactif — tel qu'un bouton, un bouton d'image ou un contrôle personnalisé — n'a pas de nom accessible, TalkBack n'a rien à annoncer lorsque cet élément est focalisé. Par exemple, vous pourriez avoir un bouton avec une image d'une flèche soulignée indiquant que l'utilisateur peut télécharger. Sans nom accessible, TalkBack n'annoncera que « Bouton, double-tap pour activer. »

Cette règle a également un impact pour les personnes utilisant Voice Access. Les utilisateurs de Voice Access qui essayent d'activer l'élément en prononçant son étiquette visible constateront qu'il ne répond pas.

Confirmer le problème du nom de la vue active

1. Activez TalkBack
2. Focalisez l'élément interactif
3. L'un des événements suivants se produira :
   • Inaccessible : Il n'annoncera pas son nom, seulement son rôle et sa valeur si présents.
   • Accessible : Il annoncera son nom dans TalkBack.

Corriger les problèmes

Pour résoudre les problèmes de nom de vue active, ajoutez une étiquette de texte ou une description de contenu à chaque élément interactif afin que TalkBack ait un nom significatif à annoncer.

Assurez-vous que le nom que vous sélectionnez :

• Contient l'étiquette visible de l'élément.
• Décrit l'action, pas l'apparence. Par exemple, une icône de loupe devrait être étiquetée « Rechercher », pas « icône de loupe ».

Si le but d'un élément change en fonction de l'état (par exemple, un bouton Lecture/Pause), mettez à jour le nom chaque fois que l'état change.

XML

Utilisez la propriété de texte d'un élément ou la description de contenu pour garantir que TalkBack a des informations précises à communiquer.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Associez les boutons d'image avec une description de contenu ou du texte pour indiquer la fonction de l'élément.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

Les boutons non illustrés devraient fournir du texte pour TalkBack.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

Pour corriger un problème détecté par cette règle, ajoutez un accessibilityLabel à l'élément interactif.

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

Lorsque les éléments sont regroupés dans un View contenant, ajoutez les propriétés accessible et accessibilityLabel à celui-ci :

<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>

Flutter

Utilisez la propriété tooltip sur IconButton pour fournir un nom accessible. Cela définit le nom annoncé par TalkBack et affiche également une info-bulle visuelle lors d'une pression prolongée.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Pour les éléments interactifs avec uniquement des enfants icônes, définissez semanticLabel sur le Icon directement :

  ElevatedButton(                                                                                                                                            
    onPressed: () {},
    child: const Icon(Icons.add, semanticLabel: 'Add item'),
  )

Lors du groupement d'une étiquette visible avec un élément interactif, enveloppez-les dans un MergeSemantics afin que TalkBack les combine en un seul élément focalisable :

  MergeSemantics(
    child: Row(
      children: [                                                                                                                                              
        const Text("Dark mode"),
        Switch(                                                                                                                                                
          value: _darkMode,                                                                                                                                  
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

Puis-je ignorer cette règle ?

Cette règle a un impact critique pour les utilisateurs et ne doit pas être ignorée. Un élément interactif sans nom est l'un des échecs d'accessibilité les plus fondamentaux. Les utilisateurs de TalkBack et Voice Access sont effectivement empêchés d'utiliser un élément sans nom accessible. Prenez des mesures pour remédier à tous les cas de ce problème avant de traiter les problèmes de priorité inférieure.

Questions fréquemment posées

En utilisant TalkBack, j'entends le contenu lu à haute voix après avoir focalisé sur l'élément. Pourquoi cette règle échoue-t-elle toujours ? Si un élément n'a pas de nom défini, le lecteur d'écran annoncera souvent sa valeur. Cependant, la valeur ne remplace pas le nom accessible manquant.

Ressources

Pages de cours Deque University

• Voir Android mobile natif sous 4.1.2a Nom, Rôle, Valeur (A)

  Remarque : L'accès complet aux ressources de Deque University nécessite un abonnement.

Autres ressources

• Règles pour l'accessibilité des contenus Web (WCAG) 2.1
  • Comprendre SC 4.1.2, Nom, Rôle, Valeur (Niveau A)