Texte Associé

Ce que Nous Vérifions

Un élément interactif doit obtenir son nom accessible d'une étiquette proche disponible pour les technologies d'assistance telles que VoiceOver et Contrôle vocal.

Exemple d'Échec ❌

Le champ « Adresse e-mail » est en focus, mais le texte visible est not announced by VoiceOver

VoiceOver annonce "Text field, blank" - uniquement le rôle et la valeur, sans nom

Les utilisateurs ne peuvent pas savoir quelle information le champ attend

Exemple Réussi ✅

L'étiquette visible « Adresse e-mail » correspond à ce qui est annoncé par VoiceOver

VoiceOver annonce "Email address, text field, blank" - nom, rôle et valeur tous présents

Les utilisateurs savent exactement quelle information le champ attend

En Un Coup d'Œil

• Cette règle a un impact de Grave à Critique, selon que l'étiquette visible est focalisable
• Les éléments interactifs doivent dériver leur nom accessible de l'étiquette visible qui les décrit
• VoiceOver n'annonce que le rôle et la valeur d'un élément si son nom accessible est manquant

Impact sur les Utilisateurs

Les personnes utilisant VoiceOver sont les plus impactées. Un élément interactif visuellement lié à une étiquette descriptive doit également transmettre cette relation par le texte pour les technologies d'assistance.

Lorsque un curseur, un bouton bascule ou un autre contrôle a une étiquette visible proche mais pas de nom accessible correspondant à cette étiquette, les utilisateurs de VoiceOver n'entendent que le rôle et la valeur de l'élément, pas sa fonction. Les utilisateurs de Contrôle vocal peuvent également être affectés lorsque le nom d'étiquette prononcé ne correspond pas au nom accessible du contrôle.

Confirmer le Problème de Texte Associé

1. Activez VoiceOver
2. Mettez le focus sur l'élément interactif
3. L'un des événements suivants se produira :
   • Inaccessible : VoiceOver n'annoncera pas l'étiquette associée comme le nom de l'élément - uniquement son rôle et sa valeur si présents
   • Accessible : VoiceOver annoncera l'étiquette associée comme le nom de l'élément

Corriger les Problèmes

Pour résoudre un problème de Texte Associé, attribuez le texte de l'étiquette visible comme nom accessible de l'élément interactif. Cela garantit que VoiceOver annonce le bon nom et aligne l'expérience de la technologie d'assistance avec ce que les utilisateurs voyants peuvent percevoir. Masquez l'élément d'étiquette autonome dans l'arbre d'accessibilité pour éviter qu'il soit annoncé deux fois.

UIKit

Définissez le accessibilityLabel sur l'élément interactif pour qu'il corresponde au texte de l'étiquette proche, puis masquez l'étiquette dans l'arbre d'accessibilité :

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Utilisez le modificateur .accessibilityLabel() sur l'élément interactif, en passant le texte de l'étiquette visible comme nom accessible :

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibilityLabel(sliderLabel)
    }
}

React Native

Assurez-vous que le texte visible accompagnant un élément interactif est inclus dans la propriété accessibilityLabel du contrôle :

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Lorsque le texte visible et un élément interactif sont groupés dans un View conteneur focalisable, assurez-vous que le texte visible est inclus dans la propriété accessibilityLabel du View conteneur :

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

Enveloppez l'étiquette visible et l'élément interactif dans un widget MergeSemantics afin qu'ils soient tous deux exposés aux technologies d'assistance comme un seul nœud focalisable. VoiceOver annoncera l'étiquette visible comme faisant partie du nom accessible de l'élément :

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

Puis-je ignorer cette Règle ?

Le Texte Associé a un impact de Grave à Critique pour les utilisateurs, et nous recommandons fortement de corriger ce problème. Étant donné que les utilisateurs de VoiceOver dépendent entièrement du nom accessible pour comprendre ce qu'un élément interactif fait, une absence d'association rend ces éléments inexploitables pour les technologies d'assistance. En savoir plus sur ignorer les règles.

Ressources

Pages de Cours Deque University

• Critère de Réussite 4.1.2 - Nom, Rôle, Valeur
• 4.1.2a Nom, Rôle, Valeur

Note : 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.0, Recommandation du W3C
  • Critère de succès 4.1.2 - Nom, rôle, valeur
• Documents de compréhension WCAG 2.0
  • Comprendre 4.1.2 A - Nom, rôle, valeur