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 :

  • adjustable Utilisé lorsqu'un élément peut être « ajusté » (par exemple, un curseur).
  • alert Utilisé lorsqu'un élément contient un texte important à présenter à l'utilisateur.
  • button Utilisé lorsque l'élément doit être traité comme un bouton.
  • checkbox 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.
  • header 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.
  • imagebutton Utilisé lorsque l'élément doit être traité comme un bouton et qu'il est également une image.
  • keyboardkey Utilisé lorsque l'élément agit comme une touche de clavier.
  • link Utilisé lorsque l'élément doit être traité comme un lien.
  • menu Utilisé lorsque le composant est un menu de choix.
  • menubar Utilisé lorsqu'un composant est un conteneur de plusieurs menus.
  • menuitem Utilisé pour représenter un élément dans un menu.
  • none Utilisé lorsque l'élément n'a pas de rôle.
  • progressbar Utilisé pour représenter un composant qui indique l'avancement d'une tâche.
  • radio Utilisé pour représenter un bouton radio.
  • radiogroup Utilisé pour représenter un groupe de boutons radio.
  • scrollbar Utilisé pour représenter une barre de défilement.
  • search Utilisé lorsqu'un élément de champ de texte doit également être traité comme un champ de recherche.
  • spinbutton Utilisé pour représenter un bouton qui ouvre une liste de choix.
  • summary Utilisé lorsqu'un élément peut être utilisé pour fournir un résumé rapide des conditions actuelles dans l'application au - premier lancement.
  • switch Utilisé pour représenter un commutateur qui peut être activé et désactivé.
  • tab Utilisé pour représenter un onglet.
  • tablist Utilisé pour représenter une liste d'onglets.
  • text Utilisé lorsque l'élément doit être traité comme un texte statique qui ne peut pas changer.
  • timer Utilisé pour représenter une minuterie.
  • togglebutton Utilisé pour représenter un bouton bascule. Devrait être utilisé avec accessibilityState checked pour indiquer si le bouton est activé ou désactivé.
  • toolbar Utilisé pour représenter une barre d'outils (un conteneur de boutons d'action ou de composants).
  • grid 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