Nom Accessible Significatif

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Assurez-vous que les noms accessibles ne sont pas redondants

Not for use with personal data

Ce que nous vérifions

Le nom accessible d'un élément ne doit pas inclure son trait d'accessibilité. VoiceOver annonce le trait automatiquement, donc l'inclure dans le nom entraîne une double lecture.

Cette règle applique une bonne pratique définie par les Human Interface Guidelines d'Apple. Vous pouvez désactiver cette règle depuis le Tableau de bord mobile ou en en ignorant la règle dans les tests écrits pour iOS.

Exemple d'échec ❌

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a red focus ring. VoiceOver speech bubble displays the announcement with the element name and trait: 'Like button, Button'.

VoiceOver announces: « Bouton J'aime, bouton »

Le mot « bouton » est inclus dans le nom accessible and annoncé à nouveau en tant que trait, créant une annonce redondante qui peut perturber les utilisateurs de lecteurs d'écran

Exemple réussi ✅

An iOS phone screen with an article preview buttons to Like, Share, or Save. The Like button has a green focus ring. VoiceOver speech bubble displays the announcement with the element name and trait - 'Like this article, button'

VoiceOver announces: « J'aime cet article, bouton »

Le nom accessible - « J'aime cet article » - n'inclut pas le trait de l'élément

VoiceOver ajoute automatiquement le trait, donc les utilisateurs entendent chaque information exactement une fois

En un coup d'œil

Cette règle a un impact mineur pour les utilisateurs
Le nom accessible d'un élément ne doit pas répéter son trait d'accessibilité - VoiceOver annonce le trait automatiquement
Par exemple, un bouton nommé « Bouton Suivant » fait que VoiceOver génère l'annonce redondante : « Bouton Suivant, bouton »

Impact sur les utilisateurs

Les utilisateurs de VoiceOver sont les plus impactés. Lorsqu'un nom accessible inclut le trait de l'élément, VoiceOver annonce le trait deux fois - par exemple, « Bouton Suivant, bouton » au lieu de « Suivant, bouton. » Cela est redondant et peut être déroutant ou distrayant pour les utilisateurs de lecteurs d'écran.

Confirmer le problème de Nom Accessible Significatif

Activez VoiceOver
Concentrez-vous sur l'élément
L'un des résultats suivants se produira :
- Inaccessible : VoiceOver annonce le trait d'accessibilité de l'élément deux fois - en tant que partie du nom accessible, puis à nouveau en tant que trait (par ex., « Bouton Suivant, bouton »)
- Accessible : VoiceOver annonce le nom accessible, suivi du trait (par ex., « Suivant, bouton »)

Corriger les problèmes

Pour résoudre un problème de Nom Accessible Significatif, assurez-vous que le nom accessible ne contient pas le trait d'accessibilité de l'élément. VoiceOver ajoute automatiquement le trait, donc l'inclure dans le nom entraîne une annonce redondante.

UIKit

Pour corriger dans Storyboard :

Sélectionnez l'élément avec un problème de MeaningfulAccessibleName.
Assurez-vous que le panneau des inspecteurs est visible.
Sélectionnez le Inspecteur d'identité.
Sous Accessibilité, entrez une étiquette qui correspond au texte visible et n'inclut pas le trait d'accessibilité de l'élément.

Pour corriger dans le code, assurez-vous que la valeur de l'étiquette d'accessibilité correspond ou contient tout le texte visible sur l'élément, et n'inclut pas son trait d'accessibilité :

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

Définissez une étiquette d'accessibilité contenant le texte visible et n'incluant pas le trait d'accessibilité de l'élément :

Button(action: {
    openMenu()
}) {
    Text("Next")
}.accessibility(label: Text("Next"))

React Native

Assurez-vous que le accessibilityLabel de l'élément ne contient pas la valeur du accessibilityRole de l'élément :

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>

Flutter

Les noms accessibles doivent décrire la finalité de l'élément. Évitez les noms génériques comme « bouton » ou « image », et n'incluez pas le rôle dans le nom. Le lecteur d'écran annonce le rôle séparément.

  // Failing — name includes the role, screen reader says "Search button, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search button',
    onPressed: () {},
  )

  // Passing — name describes the action, screen reader says "Search, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Puis-je ignorer cette règle ?

Le Nom Accessible Significatif a un impact Impact mineur pour les utilisateurs et applique une bonne pratique d'Apple plutôt qu'une exigence stricte de la WCAG. Vous pouvez désactiver cette règle entièrement depuis le Tableau de bord mobile, ou ignorer les constatations individuelles dans vos tests iOS. En savoir plus sur en ignorant les règles.