Possède un État 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 prop accessibilityState valide

Free Trial
Not for use with personal data

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

WCAG 2.0 (A) 4.1.2

Décrit l'état actuel d'un composant à l'utilisateur de technologies d'assistance.

accessibilityState est un objet. Il contient les champs suivants :

Nom Description Type Requis
disabled Indique si l'élément est désactivé ou non. booléen Non
selected Indique si un élément sélectionnable est actuellement sélectionné ou non. booléen Non
checked Indique l'état d'un élément vérifiable. Ce champ peut être de type booléen ou la chaîne « mixed » pour représenter des cases à cocher mixtes. booléen ou "mixed" Non
busy Indique si un élément est actuellement occupé ou non. booléen Non
expanded Indique si un élément extensible est actuellement développé ou réduit. booléen Non

Pour l'utiliser, définissez le accessibilityState sur un objet avec une définition spécifique.

Pourquoi c'est important

Les champs accessibilityState doivent être correctement orthographiés et correspondre à des valeurs qui ont du sens pour décrire l'état d'accessibilité prévu. Ne pas respecter les valeurs autorisées entraîne des composants non accessibles aux utilisateurs de technologies d'assistance.

Comment résoudre le problème

Assurez-vous que la prop accessibilityState est un objet ayant des champs définis avec un nom et une valeur de type valides.

Exemples réussis

<TouchableOpacity accessibilityState={{ checked: true }} />
<TouchableOpacity accessibilityState={{ checked: "mixed" }} />
<TouchableOpacity accessibilityState={{ checked: true, disabled: true }} />

Exemples échoués

<TouchableOpacity accessibilityState="selected" />
<TouchableOpacity accessibilityState={{ disabled: "true" }} />
<View accessibilityStates={["checked"]} />

Ressources