Navigation clavier avec les flèches et conformité ARIA 1.1

[juliemoynat]

Salut Nicolas,

Après discussion avec mes collègues et en repassant sur le modèle de conception ARIA des onglets tout à l'heure, j'ai découvert que le modèle de conception ARIA des onglets avait été modifié pour corriger un problème de navigation clavier très pénible notamment avec un lecteur d'écran.

En effet, la précédente version du modèle de conception indiquait qu'il fallait pouvoir naviguer dans la liste des onglets avec flèches haut, bas, gauche et droite.
Le problème est qu'on était alors coincé dans la boucle de navigation avec les flèches, dans la liste des onglets. Ainsi, il était difficile d'accéder au contenu qui s'affiche sous la liste puisqu'en faisant TAB, on peut arriver à un endroit très éloigné dans la page. Et en faisant flèche bas pour poursuivre la lecture, on changeait d'onglet.

Dans la nouvelle version du modèle (https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), seules les flèches gauche et droite doivent être utilisées. Les flèches haut et bas permettant alors d'accéder au contenu sous la liste de façon linéaire classique.

À noter que je vois dans ton système d'onglets que tu as mis un <h2> avec tabindex="0" et que celui-ci est masqué. Cela pose alors un problème de donner le focus à un élément qui n'est pas visible. Comment savoir où on se trouve alors ?

Avec la mise à jour du modèle, ce problème de focus sur un élément masqué pourra donc être également résolu au passage. :)

Et, bien sûr, je ne duplique pas le ticket mais c'est la même chose côté Van11y (sauf le titre masqué) ;-)

Merci à toi !