S’assurer que l’élément sélectionné a un nom accessible
Les normes d’accessibilité du web stipulent que chaque élément de sélection doit être associé à un élément d’étiquetage programmatique.
Pourquoi c’est important
Les lecteurs d’écran ont besoin d’étiquettes de formulaire utiles pour communiquer aux utilisateurs les détails des champs du formulaire. L’ajout d’une étiquette à tous les éléments du formulaire élimine toute confusion au cours du processus de remplissage du formulaire.
Résolution du problème
Les développeurs doivent associer par programme des étiquettes aux éléments sélectionnés. La méthode recommandée consiste à utiliser l’élément label et une association explicite à l’aide des attributs for et id.
Bon exemple de code :
<label for=”state”>State:</label> <select id=”state”></select>
L’étiquette peut également être implicite en enveloppant l’élément <label> autour de la sélection :
<label>State: <select></select></label>
Si la sélection est déjà étiquetée visuellement d’une autre manière, il peut être acceptable d’utiliser aria-label pour créer une étiquette de texte invisible que les lecteurs d’écran pourront lire.
<select aria-label=”State”></select>
Une autre méthode (parfois utilisée lorsque l’ajout d’une balise <label> perturberait la fonctionnalité ou les styles, ou lorsque plusieurs étiquettes s’appliquent à la même sélection) consiste à utiliser aria-labelledby à la place :
<div id=”state”>State:</div> <select aria-labelledby=”state”></select>
Veillez également à ce que tous les éléments d’identification soient uniques sur chaque page et à ce que le texte de l’étiquette ait un sens pour quelqu’un qui l’écoute à l’aide d’un lecteur d’écran.
Mauvais exemple de code :
State: <select></select>
Cas de test
Pour plus d’exemples, visitez la bibliothèque des règles ATC du W3C sur GitHub.