Système d’onglets accessibles avec ARIA et en Vanilla JS

Robuste et accessible

Comme c’est basé sur une structure HTML de base (une liste de liens avec des ancres internes), même si le JavaScript n’est pas chargé, la page marchera, c’est le miracle de l’amélioration progressive ;
C’est basé sur le Design Pattern ARIA pour les onglets ;
Pas de CSS/JavaScript injecté en ligne, le DOM reste propre, ce qui cool pour le responsive.

C’est (hautement) personnalisable

Vous pouvez le styler comme vous voulez ;
Vous pouvez utiliser des transitions… comme vous voulez ;
Vous pouvez créer un namespace pour les classes générées si vous avez besoin de différents comportements dans la même page ;
Chaque aspect du script peut être personnalisé, si vous transpilez le script en ES5, ce sera compatible IE9+.

Libre et sous une license permissive

Pas de problème : c’est placé sous licence MIT, donc c’est libre, open-source et vous pouvez faire ce que vous voulez avec, incluant une utilisation commerciale. Cette note de permission doit être incluse dans toutes les copies complètes ou partielles du script.
Cependant, il n’est pas interdit de me dire que vous l’avez utilisé, ou de m’envoyer un petit « merci ». ;)

Léger

20kb (développement, lisible par les humains) ;
6kb (minifié, lisible par des machines) ;
2kb minifié et gzippé (lisible par… des mutants ‽‽)

Comment ça marche

ARIA à la rescousse

Le script ajoute tous les attributs pour les contrôles et contenus des onglets (role="tab/tablist/etc.",aria-selected/controls="…").

Ensuite quelques classes pour styler

Ensuite il va générer des classes rien que pour vous, pour permettre de styler vos onglets comme vous le voulez.

Et JavaScript fait le reste

Quelques listeners pour les interactions au clavier et à la souris sont ajoutés, quand vous en activez un, cela mettra à jour les attributs et gèrera la navigation au clavier.

Comment l’utiliser

Télécharger le script

Vous pouvez utiliser la commande npm : npm i van11y-accessible-tab-panel-aria.
Vous pouvez aussi utiliser Bower : bower install van11y-accessible-tab-panel-aria.

Conventions

Ensuite, suivez les conventions données dans cet example minimaliste (en gras).

utilisez les classes nécessaires (js-tabs, js-tablist, js-tablist__item, js-tablist__link, js-tabcontent) ;
vérifiez que vos ancres marchent ;
pour des raisons d’accessibilité (pour VoiceOver), le script doit donner le focus à un hx (h2, h3, h4, etc.) dans le contenu des onglets.

Pour les Hx, vous avez deux cas :

Ils ne sont pas présents dans vos js-tabcontent, donc spécifiez dans l’attribut data-hx (il sera ajouté avec class="invisible", ce qui signifie visuellement caché, mais présent pour les aides techniques) ;
Ils sont présents, dites juste au script où ils sont en utilisant l’attribut data-existing-hx.

Exemple sans hx :

<div class="js-tabs">
  <ul class="js-tablist" data-hx="h2">
   <li class="js-tablist__item">
    <a href="#id_first" class="js-tablist__link">1er onglet</a>
   </li>
   <li class="js-tablist__item">
    <a href="#id_second" class="js-tablist__link">2nd onglet</a>
   </li>
  </ul>
 <div id="id_first" class="js-tabcontent">
   Ici le contenu du premier onglet
 </div>
 <div id="id_second" class="js-tabcontent">
   Ici le contenu du second onglet
 </div>
</div>

Exemple avec hx :

<div class="js-tabs">
  <ul class="js-tablist" data-existing-hx="h2">
   <li class="js-tablist__item">
    <a href="#id_first" class="js-tablist__link">1er onglet</a>
   </li>
   <li class="js-tablist__item">
    <a href="#id_second" class="js-tablist__link">2nd onglet</a>
   </li>
  </ul>
 <div id="id_first" class="js-tabcontent">
   <h2>title</h2>
   Ici le contenu du premier onglet
 </div>
 <div id="id_second" class="js-tabcontent">
   <h2>other title</h2>
   Ici le contenu du second onglet
 </div>
</div>

Ces exemples sont pris de la démo.

Le script est lancé au chargement de la page. Si vous avez besoin de l’exécuter sur du contenu généré en AJAX, vous pourrez utiliser par exemple sur <div id="newContent">la source des onglets</div> :

van11yAccessibleTabPanelAria(document.getElementById('newContent'));

Raccourcis clavier

Si le focus est sur les “boutons” (contrôles) des onglets :

utilisez Haut/Gauche pour voir l’onglet précédent,
utilisez Bas/Droite pour voir l’onglet suivant
utilisez Home pour voir le premier onglet (où qu’on soit sur les boutons des onglets)
utilisez End pour voir le dernier onglet (où qu’on soit sur les boutons des onglets)

Si le focus est dans les contenus des onglets :

utilisez Ctrl Haut/Gauche pour remettre le focus sur le bouton correspondant au contenu
utilisez Ctrl PageUp pour remettre le focus sur le bouton précédent celui qui correspond au contenu
utilisez Ctrl PageDown pour remettre le focus sur le bouton suivant celui qui correspond au contenu

Attention : la combinaison Ctrl+PageUp/PageDown peut activer un changement d’onglet dans le navigateur. On ne peut rien y faire à ma connaissance (si vous avez une solution, tenez-moi au courant).

Logique des classes pour styler

Avant le Javascript

Une fois posé le code avec vos contenus, stylez-les avant d’activater JavaScript : comme cela ce sera beau même si JavaScrit n’est pas chargé.

Par exemple, pensez juste que vous soyez avec de petites connexions, et le JavaScript n’est pas (encore) chargé. Ou il peut être désactivé.

Après Javascript

Vous pouvez ajouter des classes à la source, et les utiliser ainsi :

[role="tablist"].my-style {…}

En clair, vous pouvez vous reposer sur les attributs ARIA, ces styles seront appliqués seulement si le JavaScript a été chargé et bien exécuté.

Classes générées, namespacing

Le script a une autre possibilité : si vous ne pouvez ou n’aimez pas styler via les attributs, le script peut générer des classes rien que pour vous, pour styler les onglets quand le script a été activé.

Voici un exemple :

<ul … data-tabs-prefix-class="last-tabs">

L’attribut data-tabs-prefix-class ajoutera des classes sur chaque élément :

<ul … class="… last-tabs-tabs__list">
  <li … class="… last-tabs-tabs__item">
    <a … class="… last-tabs-tabs__link">…

Donc avec data-tabs-prefix-class="last-tabs" vous aurez :

last-tabs-tabs__list pour styler le ul;
last-tabs-tabs__item pour styler les li;
last-tabs-tabs__link pour styler les a;
last-tabs-tabs__content pour styler les contenus des onglets.

Bonus

Onglet ouvert par défaut

Si vous souhaitez qu’un onglet soit ouvert par défaut, c’est possible en mettant data-selected="1" sur le .js-tablist__link que vous souhaitez sélectionner (Voir la démo, deuxième exemple).

Les autres onglets restent disponibles, voici les règles de cette possibilité :

La détection des ancres (expliquée ci-dessous) aura toujours la priorité sur cette possibilité ;
S’il y avait plusieurs data-selected="1" utilisés sur le même groupe d’onglets (ce qui n’a pas de sens et ne doit pas arriver), le premier à être indiqué comme sélectionné le sera.

Ancre ajoutée à l’URL

Comme vous l’aurez remarqué (ou pas), le script ajoute un fragment à l’URL quand vous cliquez ou sélectionnez un onglet au clavier. C’est cool quand vous voulez copier/coller le lien de la page que vous êtes en train de lire, et l’onglet ouvert sera le bon !

Ancre sur un contenu d’onglet

Si vous avez besoin de faire un lien vers une page avec un id qui est sur un contenu d’onglet, le script le détectera et affichera le bon onglet, rien que pour vous.

Si vous voulez tester, ouvrez une nouvelle fenêtre, et copiez/collez ceci :
https://van11y.net/downloads/tab-panel/demo/index-fr.html#id_third

Ancre dans un contenu d’onglet

Si vous avez besoin de faire un lien vers une page avec un id qui est dans un contenu d’onglet, le script le détectera et affichera le bon onglet, rien que pour vous.

Si vous voulez tester, ouvrez une nouvelle fenêtre, et copiez/collez ceci :
https://van11y.net/downloads/tab-panel/demo/index-fr.html#cool-anchor

Lien « dans une même page » vers un onglet

Si vous avez besoin de créer un lien dans la même page vers un onglet, c’est possible :

Créez le lien vers le contenu que vous voulez cibler : <a href="#link-to-tab">Lien vers l’onglet</a> ;
Ajoutez-y la classe class="js-link-to-tab" ;
Et c’est tout. Le script fera le boulot.

Onglets accessibles utilisant ARIA