Accessibilité des composants de saisie automatique

Le modèle de zone de saisie combinée WAI-ARIA définit un ensemble précis de rôles et de propriétés pour les composants de saisie semi-automatique. Une zone de saisie combinée est un champ de saisie associé à une liste de choix qui s’ouvre dans une fenêtre contextuelle. Ce modèle permet aux lecteurs d’écran d’annoncer correctement le comportement interactif, les options disponibles et la sélection actuelle aux personnes qui ne peuvent pas voir l’interface visuelle.

Entourez le champ de saisie d’un div avec role="combobox". Cela indique aux technologies d’assistance que le champ possède une liste contextuelle associée. Définissez aria-expanded={isOpen} sur ce conteneur pour indiquer aux lecteurs d’écran si la liste de suggestions est actuellement visible ou masquée.

L’élément de saisie lui-même doit posséder les attributs suivants : aria-autocomplete="list" (la fenêtre contextuelle contient une liste de suggestions), aria-haspopup="listbox" (un clic ou une saisie ouvre une liste de choix), aria-expanded={isOpen} et aria-controls="suggestion-list-id", qui pointe vers l’id de l’élément contenant la liste déroulante.

aria-activedescendant sur le champ de saisie pointe vers l’id de l’option actuellement mise en évidence. Lorsque selectedIndex vaut 0, définissez aria-activedescendant="option-0". Les lecteurs d’écran utilisent cet attribut pour annoncer l’élément actif sans déplacer le focus réel du champ de saisie. Lorsqu’aucun élément n’est sélectionné, supprimez l’attribut ou définissez-le sur une chaîne vide.

L’élément conteneur de la liste déroulante doit posséder role="listbox" ainsi qu’un id unique correspondant à l’attribut aria-controls du champ de saisie. Ce rôle indique à l’arbre d’accessibilité que l’élément est une liste d’options sélectionnables. La liste de choix reçoit indirectement le focus grâce à aria-activedescendant sur le champ de saisie.

Chaque élément de suggestion doit posséder role="option" et un id unique, comme option-0, option-1, etc. Ajoutez aria-selected={index === selectedIndex} pour indiquer quel élément est actuellement mis en évidence. Les lecteurs d’écran annoncent à la fois le contenu de l’option et le fait qu’elle est sélectionnée lorsque l’utilisateur navigue avec les touches fléchées.

Lorsque l’utilisateur appuie sur ArrowDown et que aria-activedescendant est mis à jour vers option-1, VoiceOver annonce quelque chose comme « Fonctions React, 2 sur 5 ». Le lecteur d’écran lit automatiquement le texte de l’option et sa position dans la liste à partir du balisage ARIA. Aucune région dynamique supplémentaire n’est nécessaire pour la navigation au clavier.

Effectuez des tests avec VoiceOver sur macOS (Cmd+F5 pour activer ou désactiver la fonctionnalité) et avec NVDA sur Windows (téléchargement gratuit). Accédez au champ de saisie et commencez à taper. Vérifiez que le lecteur d’écran annonce le rôle de zone de saisie combinée, le nombre de résultats trouvés et chaque option lorsque vous parcourez la liste avec les touches fléchées. Comparez le comportement avec les exemples du Guide des pratiques de création WAI-ARIA.

Lorsque les suggestions sont chargées de manière asynchrone, ajoutez un div masqué visuellement avec aria-live="polite" et aria-atomic="true". Mettez à jour son contenu textuel une fois le chargement terminé : « 5 résultats trouvés » ou « Aucun résultat trouvé ». Le lecteur d’écran annonce ce message après avoir terminé la lecture en cours, ce qui permet d’informer l’utilisateur sans l’interrompre.

Le Guide des pratiques de création WAI-ARIA (APG), disponible à l’adresse w3.org/WAI/ARIA/apg, contient une page consacrée au modèle de zone de saisie combinée, avec des exemples de code fonctionnels et des spécifications détaillées sur les interactions au clavier. Consultez toujours l’APG lorsque vous implémentez des composants interactifs comme une saisie semi-automatique, des boîtes de dialogue ou des onglets, afin de garantir leur pleine conformité aux règles d’accessibilité.

Fournissez un aria-label sur le champ de saisie s’il n’existe aucun élément d’étiquette visible : aria-label="Search suggestions". Ne vous fiez pas uniquement à placeholder pour fournir une étiquette : les textes indicatifs disparaissent lorsque l’utilisateur saisit du texte et ne sont pas annoncés de manière uniforme par tous les lecteurs d’écran. Un élément label visible avec htmlFor constitue toujours la meilleure solution.

Quelle est la fonction de l’attribut aria-activedescendant sur un champ de saisie semi-automatique ?

Utilisez role="combobox" sur le conteneur, aria-autocomplete="list" sur le champ de saisie, ainsi que aria-expanded, aria-controls et aria-activedescendant pour relier le champ à la liste de suggestions. Chaque option nécessite role="option", un id unique et aria-selected. Ajoutez une région aria-live pour annoncer le nombre de résultats asynchrones.