Où placer l'aria-les contrôles de l'attribut dans mes onglets de balisage

Je suis la mise en place des onglets de contenu de l'article 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 vais être de définir différents rôles ARIA (role="tablist", role="tab", role="tabpanel", etc) sur ce balisage structurel via javascript (car si il n'y a pas de script puis il n'y a pas d'onglets), mais je ne suis pas très bien où placer mon " aria-controls attributs. Faut-il aller sur le <li> élément ou sur son <a> élément enfant? Ou n'est-il pas d'importance? En effet, la même question pourrait être posée à propos de role="tab" et tabindex="0" -- ces choses aller sur l'élément de liste ou de l'ancre?

OriginalL'auteur Rick Lecoat | 2016-05-22

  1. 5

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

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

    Pour répondre à votre suivi sur la question, mettre le role="tab" sur le <a href> vu qu'il est déjà prêt à recevoir le focus du clavier et être exploitables par le navigateur. Cela signifie également que vous n'aurez pas besoin d'utiliser tabindex à tous.

    Pensez également à jeter un role="presentation" sur le <li> éléments et role="tablist" sur le <ul> (surtout depuis que vous avez rendu le <li> inerte avec role="presentation").

    Être préparée pour gérer la touche de la flèche de navigation, comme par l'aide de l'onglet rôles sont essentiellement dire à un utilisateur expert que ces onglets se comportent comme des onglets dans l'OS, qui honorent les touches fléchées pour basculer entre les onglets.

    Des ressources supplémentaires de la peine de vérifier:

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

    L'w3.org lien d'une erreur 404. Cela peut être un substitut approprié: w3.org/TR/wai-aria-1.1/#aria-controls

    OriginalL'auteur aardrian

  2. 2

    Cette démo montre un lecteur d'écran à l'aide de tabpanels avec ARIA. Le lecteur d'écran Jaws fournit un raccourci pour passer de l'onglet correspondant à l'tabpanel basée sur la relation créée par l'air-contrôle de l'attribut.

    Si vous êtes curieux, cette démo montre un lecteur d'écran à l'aide de tabpanels sans ARIA.

    Lorsque vous créez un ensemble de tabpanels vous voulez que le widget pour représenter un seul taquet de tabulation du clavier de commande. Quand quelqu'un utilise la touche tab pour vous déplacer sur l'ensemble d'onglets, l'accent doit aller à l'onglet actuellement sélectionné, et appuyez ensuite sur la touche de tabulation doit prendre le focus à l'arrière dans le contenu.

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

    Le script qui permet à quelqu'un pour faire défiler les onglets utilisez les touches fléchées gauche/droite devrait également mettre à jour les valeurs de l'attribut tabindex sur chaque onglet, de sorte que tous, mais l'onglet actuellement sélectionné ont tabindex la valeur -1. Il y a un travail tabpanels démo ici.

    Merci pour ces demoes Léonie. L'utilisation de tabindex dans un contexte de l'accessibilité a toujours été un peu un mystère pour moi; d'abord à l'aide de la propriété tabindex est recommandé, alors il n'était pas recommandé (pour éviter tout conflit avec les raccourcis clavier), et maintenant il est recommandé, mais avec une assez arcanes ensemble de règles. Certainement quelque chose que j'ai besoin de regarder en plus. Des acclamations.
    L'attribut tabindex a été mis à jour en HTML5. Il est toujours possible de les utiliser pour faire des choses horribles, mais c'est aussi ok. Cet article sur la <a href="à l'aide de" >paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/... l'attribut tabindex</a> pourrait être utile.
    Smashing, merci Léonie. J'ai déjà un tas de signets pour les pages à paciellogroup.com et je vais ajouter à la collection. FWIW, votre lien semble s'être brouillé; la bonne URL est paciellogroup.com/blog/2014/08/using-the-tabindex-attribute (bien que si le rendre méconnaissable eu lieu dans le cadre de Débordement de la Pile du système de commentaires puis, bien sûr, la mine pourrait obtenir de la même façon mutilé).

    OriginalL'auteur Léonie Watson