Nom du contrôle actif

Ce que nous vérifions

Un élément interactif devrait avoir un nom accessible disponible pour les technologies d'assistance telles que VoiceOver et Voice Control.

Exemple d'échec ❌

Aucun nom (accessibilityLabel) défini.

VoiceOver lit "Button"

Voice Control — l'utilisateur dit « Notifications »
L'élément ne répond pas puisqu'il n'a pas de nom

Exemple réussi ✅

accessibilityLabel=
'Notifications'

VoiceOver lit "Notifications, button"

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

En un coup d'œil

• Cette règle a un impact critique pour les utilisateurs
• Chaque élément interactif a besoin d'un nom : les boutons, les liens et les champs de saisie nécessitent tous un nom accessible que VoiceOver peut annoncer
• Si un élément interactif n'a pas de texte visible, fournissez-en un explicitement en utilisant accessibilityLabel pour lui donner un nom significatif
• Ne laissez pas VoiceOver sans rien à dire : un élément qui n'annonce que son rôle ou sa valeur - sans nom - ne donne pas aux utilisateurs un contexte précis sur sa fonction
• VoiceOver essaiera d'annoncer quelque chose (comme le texte du bouton ou le nom de l'image), il est donc préférable de fournir un nom précis et intentionnel

Impact sur les utilisateurs

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

Lorsque un élément interactif - tel qu'un bouton, un champ de formulaire ou un contrôle personnalisé - n'a pas de nom accessible, VoiceOver 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, VoiceOver n'annoncera que « Bouton, double-tapez pour activer. »

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

Confirmer le problème de nom de contrôle actif

1. Activez VoiceOver
2. Focalisez l'élément interactif
3. L'un des cas 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 VoiceOver.

Corriger les problèmes

Pour résoudre les problèmes de contrôle actif, ajoutez une étiquette d'accessibilité à chaque élément interactif afin que VoiceOver ait un nom significatif à annoncer. Assurez-vous que le nom sélectionné contient l'étiquette visible de l'élément.

Assurez-vous que le nom sélectionné décrit l'action, pas l'apparence. Une icône de loupe devrait être étiquetée « Rechercher », et non « icône de loupe ».

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

UIKit

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

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Assurez-vous que le texte de l'élément est significatif ou fournissez un accessibilityLabel si davantage de contexte est nécessaire.

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

Assurez-vous que l'image a un nom significatif. Sachez que cela ne sera pas une option lorsque vous prenez en charge plusieurs langues. Si le nom n'est pas viable, définissez un accessibilityLabel sur l'image.

Alternativement, combinez un élément parent (ex : enveloppe générique) et ses enfants (ex : texte et un bouton) pour créer un seul élément. Si un texte pertinent n'est pas disponible, définissez un accessibilityLabel sur l'ensemble de la vue comme montré 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)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

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 des éléments sont regroupés au sein d'un View de conteneur, 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 VoiceOver.

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

Lors du groupement d'une étiquette visible avec un élément interactif, enveloppez-les dans MergeSemantics pour que VoiceOver 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 VoiceOver et de contrôle vocal auront du mal à utiliser un élément sans nom accessible. Prenez des mesures pour remédier à toutes les instances de ce problème avant de traiter les problèmes de moindre priorité.

Questions fréquentes

Lorsque j'utilise VoiceOver, j'entends le contenu lu à haute voix après m'être concentré sur l'élément. Pourquoi cette règle échoue-t-elle toujours ? Si un élément manque d'un nom défini, le lecteur d'écran annoncera souvent sa valeur. Cependant, la valeur ne remplace pas le nom accessible manquant. Pour les images dans les boutons, en particulier, VoiceOver peut annoncer le nom de fichier de l'image. Même si le nom de fichier est descriptif, cela ne remplace pas l'attribut de nom accessible manquant.

Ressources

Pages de cours de Deque University

• Voir Natif Mobile iOS sous 4.1.2a Nom, Rôle, Valeur (A)

  Remarque : Un abonnement est nécessaire pour un accès complet aux ressources de Deque University.

Autres ressources

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