Liste de choix
Une liste de choix est un élément de formulaire qui propose un menu d'options prédéfinies, en HTML c'est l'élément select. L'utilisateur ouvre la liste, parcourt les options et en sélectionne une ou plusieurs. Pour les technologies d'assistance, c'est l'un des composants natifs les plus fiables, à condition de ne pas le remplacer par un faux menu personnalisé en div.
Un utilisateur de lecteur d'écran arrive sur votre formulaire. Il appuie sur la flèche bas, entend « France », puis « Allemagne », « Belgique ». Il tape la lettre « E », le focus saute à « Espagne ». Zéro JavaScript. C'est le <select> natif qui fait tout le travail.
#Ce que fait un <select>
La balise <select> crée une liste déroulante. Chaque option est un élément <option>. Quand la liste est longue, <optgroup> regroupe les options par catégorie :
<label for="pays">Pays</label>
<select id="pays" name="pays">
<option value="">Choisir un pays</option>
<optgroup label="Europe">
<option value="fr">France</option>
<option value="de">Allemagne</option>
</optgroup>
<optgroup label="Amérique">
<option value="ca">Canada</option>
<option value="br">Brésil</option>
</optgroup>
</select>Le navigateur se charge du reste. L'utilisateur navigue avec les flèches, cherche une option en tapant sa première lettre. Les lecteurs d'écran annoncent le rôle du champ, ses options et la sélection en cours. Tout est couvert par la technique H91 du W3C. Comme pour tout champ de formulaire, le <select> a besoin d'un <label> relié par les attributs for et id.
Un conseil que l'on oublie souvent : AcceDe Web recommande d'ordonner les options de manière logique (alphabétique, numérique ou par pertinence contextuelle) et de ne jamais les préfixer avec des tirets ou des étoiles. La raison est concrète : taper « E » pour atteindre « Espagne » ne fonctionne plus si l'option s'appelle « --Espagne ».
#Le piège du faux select en <div>
Le <select> natif n'est pas le composant le plus photogénique. Les designers le savent. La tentation est forte de le remplacer par un menu personnalisé en <div> et JavaScript.
Un <div> n'est pas un contrôle de formulaire. Le navigateur ne lui attribue aucun rôle et aucune interaction clavier. Les lecteurs d'écran ne l'annoncent pas comme une liste de choix. Pour recréer ce comportement, il faut reproduire le pattern Listbox du W3C : rôles listbox et option, gestion du focus, navigation par flèches, sélection par première lettre, fermeture par Échap.
C'est faisable. Le W3C recommande pourtant de préférer les contrôles natifs tant que le besoin ne l'exige pas. Chaque composant ARIA personnalisé multiplie les risques de régression à chaque mise à jour du code.
#En résumé
Le <select> natif est accessible sans effort : le navigateur gère le clavier et les technologies d'assistance à votre place. Regroupez les options longues avec <optgroup> et ordonnez-les logiquement. Ne les préfixez pas avec des caractères décoratifs. Et si vous personnalisez l'apparence, préparez-vous à recoder intégralement l'interaction ARIA.