Navigation au clavier dans les widgets composites : tabindex flottant, flèches et Échap

Ce que c'est

Le guide d'interface clavier de l'APG décrit la convention commune aux plateformes de bureau : Tab et Maj+Tab déplacent le focus d'un composant d'interface au suivant, tandis que d'autres touches, principalement les flèches, déplacent le focus à l'intérieur d'un composant qui contient plusieurs éléments focalisables. Un groupe de boutons radio en est l'exemple natif : un seul bouton radio se trouve dans la séquence de tabulation, les flèches se déplacent entre les options, et Tab quitte le groupe. Les composites personnalisés (listes d'onglets, barres d'outils, menus, grilles, arborescences, listes de sélection) devraient se comporter de la même façon, de sorte qu'une barre d'outils de vingt éléments ne coûte qu'une seule pression sur Tab, et non vingt.

Le guide nomme deux stratégies de mise en œuvre. Avec un tabindex flottant, un seul élément possède tabindex="0" et tous les autres tabindex="-1" ; les gestionnaires de touches fléchées déplacent le focus du DOM vers l'élément suivant et échangent les valeurs, de sorte qu'un retour ultérieur au composant atterrisse sur le dernier élément utilisé. Avec aria-activedescendant, le focus du DOM reste sur le conteneur et l'attribut désigne l'élément « virtuellement » focalisé, ce qui convient aux zones de saisie combinées (comboboxes), où le focus doit rester dans le champ de texte.

Pourquoi c'est important

Les personnes qui ne peuvent pas utiliser un pointeur dépendent de ces conventions pour prévoir ce que fera une touche. Le critère WCAG 2.1.2 (pas de piège au clavier, niveau A) exige que le focus déplacé dans un composant au clavier puisse en ressortir au clavier seul, et que toute sortie nécessitant autre chose que les flèches ou la touche Tab sans modificateur, ou une autre méthode standard, soit expliquée à l'utilisateur.

Comment l'appliquer

• Donner à chaque composite un seul arrêt de tabulation et se déplacer à l'intérieur avec les flèches ; les modèles individuels de l'APG ajoutent Origine (Home) et Fin (End) et, pour les listes de sélection, les menus et les arborescences, une navigation par première lettre. Suivre le modèle propre au widget : une liste d'onglets horizontale utilise Gauche/Droite, un menu vertical Haut/Bas, une grille les quatre.
• Échap ferme les surfaces transitoires : le modèle de boîte de dialogue de l'APG indique Échap comme la touche qui ferme la boîte de dialogue, et les modèles de bouton de menu et de zone de saisie combinée l'utilisent pour fermer leurs popups. Fermer aussi lorsque le focus quitte la surface.
• Entrée et Espace activent ; le guide déconseille d'associer des touches modificatrices à Tab, Entrée, Espace ou Échap, qui appartiennent à la plateforme.
• Faire en sorte que l'indicateur visuel de focus suive l'index flottant ; un focus virtuel via aria-activedescendant nécessite sa propre mise en évidence.
• Décider si la sélection suit le focus (les flèches sélectionnent immédiatement, comme dans les groupes de boutons radio natifs) ou en est séparée (Espace sélectionne) ; le guide traite des cas où chacune de ces approches est appropriée.

Pièges

Mettre tabindex="0" sur chaque élément fait parcourir tout le widget avec Tab. Retirer du DOM l'élément portant tabindex="0" (un onglet supprimé) ne laisse plus aucun arrêt de tabulation. Des gestionnaires qui appellent preventDefault() sur chaque touche avalent les raccourcis du navigateur. Les éditeurs intégrés qui capturent Tab doivent offrir la sortie documentée.