Nom des éléments imbriqués

Ce que nous vérifions

Un élément focalisable doit avoir tout le texte visible dans son nom accessible, disponible pour les technologies d’assistance telles que VoiceOver et Voice Control.

Exemple non conforme ❌

La carte est focalisable, mais les éléments de texte enfant sont not included in the container's accessible name

VoiceOver annonce seulement "Group" — aucun des textes visibles (titre, auteurs, date, etc.) n'est lu à haute voix

Les utilisateurs de lecteurs d'écran n'ont pas accès au contenu que les utilisateurs voyants peuvent lire

Exemple conforme ✅

Tout le texte visible dans la carte est included in the container's accessible name

VoiceOver annonce le contenu complet : titre, auteurs, date de publication, nombre de pages, format et ISBN

Les utilisateurs de lecteurs d'écran reçoivent la même information que les utilisateurs voyants

En un coup d'œil

• Cette règle a un impact critique pour les utilisateurs
• Tout texte visible à l'intérieur d'un conteneur focalisable doit être disponible pour VoiceOver et Voice Control
• Dans UIKit, définissez explicitement accessibilityLabel sur le conteneur pour inclure tout le texte imbriqué
• Dans SwiftUI, utilisez .accessibilityElement(children: .combine) pour garantir que tout le texte enfant soit annoncé
• Dans React Native, évitez de définir accessibilityElementsHidden à true sur les éléments textuels visibles

Impact sur les utilisateurs

Les personnes utilisant VoiceOver sont les plus touchées par les problèmes de nom des éléments imbriqués. Lorsque plusieurs éléments sont regroupés dans un conteneur, VoiceOver peut ne pas lire tout le texte à l'intérieur du conteneur, surtout si les éléments de texte individuels sont cachés aux technologies d'assistance. Cela signifie que les personnes qui s'appuient sur VoiceOver peuvent ne pas être conscientes de contenus importants à l'écran auxquels les utilisateurs voyants ont accès.

Confirmer le problème de nom des éléments imbriqués

1. Activez VoiceOver
2. Concentrez-vous sur l'élément d'accessibilité contenant le texte
3. L'une des situations suivantes se produira :
   • Inaccessible : VoiceOver ne lira pas tout le texte visible dans la zone de mise au point
   • Accessible : VoiceOver lira tout le texte contenu dans la zone de mise au point

Résoudre les problèmes

Pour résoudre les problèmes de nom des éléments imbriqués, assurez-vous que tout le texte visible à l'intérieur d'un conteneur focalisable soit disponible pour les technologies d'assistance. Évitez de masquer explicitement les éléments textuels à VoiceOver ou Voice Control quand ils contiennent du contenu auquel les utilisateurs voyants peuvent accéder.

UIKit

Un problème détecté par cette règle est causé par l'utilisation de la valeur par défaut accessibilityLabel pour un élément d'accessibilité contenant plusieurs éléments de texte.

Pour corriger, définissez explicitement accessibilityLabel du conteneur pour inclure tout le texte visible :

let paragraphOne = UILabel()
let paragraphTwo = UILabel()
let accessibilityElement = UIView()

paragraphOne.text = "One paragraph of text about something."
paragraphTwo.text = "A second paragraph of text about something."

accessibilityElement.addSubviews([paragraphOne, paragraphTwo])

// Update the accessibility element's accessibilityLabel, so both paragraphs are read by VoiceOver.
view.accessibilityLabel = "\(paragraphOne.text) \(paragraphTwo.text)"

SwiftUI

Un problème trouvé par cette règle dans SwiftUI indique une mauvaise utilisation du modificateur accessibilityElement en plus du modificateur accessibilityElement(children:..).

Utilisez ces modificateurs sur une vue de regroupement plutôt que sur des éléments individuels. Notez l'ordre et AccessibilityChildBehavior spécifié ci-dessous.

VStack(alignment: .leading) {
    HStack {
      Text("Title:")
      book.title.map({ title in
        Text(title)
      })
    }
    HStack {
      Text("Author:")
      book.author.map({ author in
        Text(author)
      })
    }

    HStack {
      Text("Genre:")
      book.genre.map({ genre in
        Text(genre)
      })
    }
}
.accessibilityElement()
.accessibilityElement(children: .combine)

React Native

Un problème trouvé par cette règle dans les applications construites avec React Native indique une mauvaise utilisation de la propriété accessible et/ou de la propriété accessibilityElementsHidden. Si vous définissez explicitement ces propriétés, assurez-vous qu'elles ne soient PAS configurées de manière à masquer le texte visible aux technologies d'assistance.

Flutter

Lorsqu'un conteneur regroupe plusieurs morceaux de texte, assurez-vous que tout le texte visible soit exposé au lecteur d'écran. Utilisez MergeSemantics pour combiner les nœuds de texte enfant en un seul nom accessible.

// Failing — ExcludeSemantics hides visible text from the screen reader
Semantics(
  label: 'Item name: Widget',
  child: Column(
    children: [
      const Text('Item name: Widget'),
      ExcludeSemantics(child: const Text('Price: \$9.99')),
      ExcludeSemantics(child: const Text('In stock')),
    ],
  ),
)

// Passing — MergeSemantics combines all child text into one node
// Screen reader announces "Item name: Widget, Price: $9.99, In stock"
MergeSemantics(
  child: Column(
    children: [
      const Text('Item name: Widget'),
      const Text('Price: \$9.99'),
      const Text('In stock'),
    ],
  ),
)

Puis-je ignorer cette règle ?

Nom des éléments imbriqués a un Impact critique pour les utilisateurs, et nous recommandons fortement de prendre des mesures pour remédier à ce problème. Dans de rares cas, certains textes à l'intérieur d'un conteneur peuvent être intentionnellement décoratifs ou redondants — mais cela doit être l'exception, pas la règle. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de Deque University

• Critère de succès 1.3.2 - Séquence significative (A)

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

Autres ressources

• Directives pour l'accessibilité du contenu Web (WCAG) 2.0, recommandation du W3C
  • Critère de succès 1.3.2 - Séquence significative
• Documents de compréhension de la WCAG 2.0
  • Comprendre 1.3.2 A - Séquence Significative