L'élément select doit avoir un nom accessible

Associez par programmation des étiquettes à des éléments select. La méthode recommandée dans la plupart des cas consiste à utiliser l'élément label et une association explicite utilisant les attributs for et id . Les exemples ici sont classés de la solution acceptable la plus courante à la solution acceptable la moins courante.

<label for="state">State:</label> <select id="state"></select>

L'étiquette peut également être implicite en enveloppant l' <label> élément autour du select :

<label>State: <select></select></label>

Si le select est déjà étiqueté 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 méthode alternative (parfois utilisée lorsque l'ajout d'une <label> balise perturberait la fonctionnalité ou les styles, ou lorsque plusieurs étiquettes s'appliquent au même select) consiste à utiliser aria-labelledby à la place :

<div id="state">State:</div> <select aria-labelledby="state"></select>

Assurez-vous également que tous les id éléments sont uniques sur chaque page et que le texte de l'étiquette a du sens pour quelqu'un qui les écoute avec un lecteur d'écran.

Lorsque vous ajoutez des étiquettes, veillez à éviter les éléments suivants :

State: <select></select>

Ce balisage génère une zone de texte avec les mots « État : » à côté. Les utilisateurs voyants n’ont aucun problème à associer le texte au champ de sélection. Néanmoins, ce lien n’est pas aussi clair pour les utilisateurs non voyants, d’autant plus que les formulaires deviennent plus longs et plus complexes. Cette ambiguïté peut rendre les erreurs plus probables, surtout lorsque les informations requises sont plus complexes qu’un État.

Pour obtenir des instructions détaillées sur la manière de mettre en œuvre ces différentes méthodes d'étiquetage, consultez les contrôles automatisés exécutés dans le cadre de cette règle.

Enfin, assurez-vous que chaque select élément n'a qu'une seule étiquette.