web-dev-qa-db-fra.com

Où placer l'attribut aria-controls dans le balisage de mes onglets

Je configure une section de contenu à onglets dans ma page à l'aide d'un script qui suit la syntaxe suivante:

<!-- Clickable tab links -->
<ul class="js-tablist">
    <li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
    <li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
    <li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>

<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
    <section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>

Je définirai différents rôles ARIA (role="tablist", role="tab", role="tabpanel", etc.) sur ce balisage structurel via javascript (car s'il n'y a pas de script, il n'y a pas d'onglets) mais je ne sais pas trop où placer mes attributs "aria-controls". Devraient-ils continuer le <li> élément ou sur son <a> élément enfant? Ou n'est-ce pas important? En effet, la même question pourrait être posée sur role="tab" et tabindex="0" - ces éléments doivent-ils figurer sur l'élément de liste ou sur l'ancre?

htmltabsaccessibilitywai-aria
13
Rick Lecoat

Mettez aria-controls sur l'élément qui obtient role="tab".

aria-controls est ce qui crée la relation entre un onglet et son panneau. Voir la troisième puce dans la description de aria-controls de la spécification: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

Pour répondre à votre question suivante, mettez le role="tab" sur le <a href> car cela est déjà amorcé pour recevoir le focus clavier et être actionnable par le navigateur. Cela signifie également que vous n'aurez pas du tout besoin d'utiliser tabindex.

Pensez également à lancer un role="presentation" sur le <li> éléments et role="tablist" sur le <ul> (d'autant plus que vous rendez le <li> inerte avec role="presentation").

Soyez prêt à gérer également la navigation des touches fléchées, car en utilisant les rôles d'onglet, vous dites essentiellement à un utilisateur expert que ces onglets se comporteront comme des onglets dans le système d'exploitation, qui honorent les touches fléchées pour basculer entre les onglets.

Ressources supplémentaires à vérifier:

Après tout cela, veuillez le tester dans des lecteurs d'écran pour vous assurer qu'il se comporte comme prévu.

8
aardrian

Cette démo montre un lecteur d'écran utilisant des tabulations avec ARIA . Le lecteur d'écran Jaws fournit un raccourci pour passer de l'onglet au tableau à onglets correspondant en fonction de la relation créée par l'attribut aria-controls.

Si vous êtes curieux, cette démo montre un lecteur d'écran utilisant des onglets sans ARIA .

Lorsque vous créez un ensemble de panneaux à onglets, vous voulez que le widget représente un seul taquet de tabulation dans l'ordre du clavier. Lorsque quelqu'un utilise la touche de tabulation pour passer à l'ensemble des onglets, la mise au point doit se faire sur l'onglet actuellement sélectionné et la prochaine pression sur la touche de tabulation doit à nouveau se concentrer sur le contenu.

Vous pouvez utiliser un tabindex itinérant pour ce faire. Seul l'onglet actuellement sélectionné doit pouvoir être mis au point. Tous les autres onglets (en particulier le <a> éléments qui les représentent) devrait avoir tabindex = "- 1" défini. Cela les empêche d'être inclus dans la séquence d'onglets du clavier.

Le script qui permet à quelqu'un de parcourir les onglets à l'aide des touches fléchées gauche/droite doit également mettre à jour les valeurs de l'attribut tabindex sur chaque onglet, de sorte que tous les onglets sauf l'onglet actuellement sélectionné aient tabindex défini sur -1. Il y a une démonstration des tabs de travail ici.

2
Léonie Watson