A un rôle d'accessibilité valide

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

Règle exigeant que les composants React Native utilisent une propriété accessibilityRole valide

Free Trial
Not for use with personal data

ID de la règle : has-valid-accessibility-role

WCAG 2.0 (A) 4.1.2

accessibilityRole communique l'objectif d'un composant à l'utilisateur de la technologie d'assistance.

accessibilityRole peut être l'un des suivants :

  • ajustable Utilisé lorsqu'un élément peut être « ajusté » (par exemple, un curseur).
  • alerte Utilisé lorsqu'un élément contient un texte important à présenter à l'utilisateur.
  • bouton Utilisé lorsque l'élément doit être traité comme un bouton.
  • case à cocher Utilisé lorsqu'un élément représente une case à cocher qui peut être cochée, décochée ou avoir un état coché mixte.
  • combobox Utilisé lorsqu'un élément représente une zone de liste déroulante, permettant à l'utilisateur de choisir parmi plusieurs options.
  • en-tête Utilisé lorsqu'un élément agit comme un en-tête pour une section de contenu (par exemple, le titre d'une barre de navigation).
  • image Utilisé lorsque l'élément doit être traité comme une image. Peut être combiné avec un bouton ou un lien.
  • bouton image Utilisé lorsque l'élément doit être traité comme un bouton et qu'il est également une image.
  • touche clavier Utilisé lorsque l'élément agit comme une touche de clavier.
  • lien Utilisé lorsque l'élément doit être traité comme un lien.
  • menu Utilisé lorsque le composant est un menu de choix.
  • barre de menu Utilisé lorsqu'un composant est un conteneur de plusieurs menus.
  • élément de menu Utilisé pour représenter un élément dans un menu.
  • aucun Utilisé lorsque l'élément n'a pas de rôle.
  • barre de progression Utilisé pour représenter un composant qui indique l'avancement d'une tâche.
  • radio Utilisé pour représenter un bouton radio.
  • groupe radio Utilisé pour représenter un groupe de boutons radio.
  • barre de défilement Utilisé pour représenter une barre de défilement.
  • recherche Utilisé lorsqu'un élément de champ de texte doit également être traité comme un champ de recherche.
  • bouton rotatif Utilisé pour représenter un bouton qui ouvre une liste de choix.
  • résumé Utilisé lorsqu'un élément peut être utilisé pour fournir un résumé rapide des conditions actuelles dans l'application au - premier lancement.
  • commutateur Utilisé pour représenter un commutateur qui peut être activé et désactivé.
  • onglet Utilisé pour représenter un onglet.
  • liste d'onglets Utilisé pour représenter une liste d'onglets.
  • texte Utilisé lorsque l'élément doit être traité comme un texte statique qui ne peut pas changer.
  • minuterie Utilisé pour représenter une minuterie.
  • bouton bascule Utilisé pour représenter un bouton bascule. Devrait être utilisé avec accessibilityState checked pour indiquer si le bouton est activé ou désactivé.
  • barre d'outils Utilisé pour représenter une barre d'outils (un conteneur de boutons d'action ou de composants).
  • grille Utilisé avec ScrollView, VirtualizedList, FlatList ou SectionList pour représenter une grille. Ajoute les annonces d'entrée/sortie de grille à GridView d'Android.

Pourquoi est-ce important

Les éléments auxquels sont attribuées des valeurs de rôle invalides ne sont pas interprétés par les technologies d'assistance comme prévu par le développeur.

Lorsque les lecteurs d'écran et d'autres technologies d'assistance ne connaissent pas le rôle de chaque élément, ils ne peuvent pas interagir avec lui de manière intelligente, ni communiquer le rôle à l'utilisateur. Les fonctionnalités, propriétés et méthodes d'un élément pour transmettre des informations vers et/ou depuis l'utilisateur ne peuvent pas être communiquées via les technologies d'assistance lorsqu'une valeur de rôle est invalide.

Comment résoudre le problème

Assurez-vous que la valeur accessibilityRole est un rôle valide.

Exemples valides

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Exemples non valides

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Ressources