Des onglets dans les règles de l'art

Sophie Schuermans le 15/09/2015 - Réagissez

Le problème

Tout comme un diaporama, un système d'onglets est visuellement très intuitif mais peut vraiment porter à confusion pour quelqu'un qui ne voit pas l'écran ou qui n'en a pas la vue d'ensemble.

  • Pour un utilisateur de lecteur d'écran, les onglets ne sont pas une entité bien délimitée. Il n'est pas clair où le contenu d'un panneau d'onglet se termine. Après avoir atteint la fin de l'onglet l'utilisateur doit penser à remonter vers le haut pour sélectionner un autre onglet.
  • Quand on sélectionne un onglet, le panneau correspondant à cet onglet s'affiche, en remplaçant le contenu de l'onglet qui était sélectionné avant (rafraîchissement dynamique).
  • Les panneaux n'ont généralement pas de titre. L'onglet actif se distingue visuellement et fait office de titre pour le panneau correspondant, mais un utilisateur de lecteur d'écran ne dispose pas de cette information et ne sait pas quel est l'onglet actif.

screenshot tabs van Hans Hillen

Code de base d'un système d'onglets

<div id="Tabs">
<ul>
  <li><a id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
  <li><a id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
  <li><a id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div style="display: block;" id="tabsdemo-1">
<p>The dog Canis lupus familiaris, is?</p>
</div>

<div style="display: none;" id="tabsdemo-2">
<p>The cat (Felis catus), also known as? </p>
</div>
				
<div style="display: none;" id="tabsdemo-3">
<p>Domestic sheep are quadrupedal?</p>
</div>

ARIA à la rescousse

Les onglets sont un des rares widgets pour lesquels nous recommandons fortement d'utiliser ARIA. Pour le faire correctement, partez d'une liste de liens (onglets) suivie d'une série de divs (panneaux pour le contenu), et ajoutez les éléments de sémantique qui n'existent pas en HTML:

  • changez la valeur sémantique des liens en "onglet" avec role="tab",
  • regroupez les onglets en liste d'onglets avec role="tablist" sur le ul,
  • écrasez la valeur sémantique des éléments li avec role="presentation",
  • indiquez avec aria-selected quel onglet est sélectionné. Ajoutez cet attribut à chaque onglet et n'oubliez pas de mettre à jour sa valeur à chaque changement.
  • indiquez le lien entre l'onglet et le panneau correspondant avec aria-controls. La valeur de cet attribut doit être celle de l'attribut id du panneau correspondant.
  • utilisez role="tabpanel" pour indiquer où commence et où termine un panneau d'onglet,
  • donner un nom à chaque panneau avec aria-labelledby. Cet attribut reçoit comme valeur l'id de l'onglet qui correspond à ce panneau.

Ce film montre étape par étape comment ajouter les attributs ARIA. Il contient également une discussion intéressante sur la manière de sélectionner les onglets. Entre temps la majorité semble d'accord pour dire que la deuxième solution est la meilleure : on utilise les flèches du clavier pour sélectionner un onglet et TAB pour aller au contenu de l'onglet. Cependant tous les utilisateurs ne savent pas encore qu'ils peuvent utiliser les flèches pour passer d'un onglet à l'autre.

Comportement au clavier

ARIA ajoute de l'information sémantique mais n'a pas d'effet sur l'aspect visuel ou la manière de fonctionner de l'interface. Pour que les onglets se comportent de la manière attendue pour les utilisateurs qui naviguent au clavier (dont les utilisateurs de lecteurs d'écrans), il faut également faire les choses suivantes:

  • Ajoutez tabindex="0" à l'onglet actif et tabindex="-1" à tous les autres onglets. De cette manière seul l'onglet actif se trouve dans l'ordre de tabulation.
  • Faites en sorte que l'on puisse utiliser les flèches pour passer d'un onglet à l'autre : en utilisant la flèche droite (ou vers le bas) le prochain onglet est sélectionné et le panneau correspondant s'affiche. Les flèches gauche et vers le haut sélectionnent l'onglet précédent.
  • Après avoir sélectionné un onglet avec les flèches, une tabulation doit déplacer le focus sur le panneau correspondant. Il est essentiel pour un utilisateur de lecteur d'écran que le focus se trouve tout en haut du panneau : soit sur le panneau lui même, soit sur le premier élément du panneau (titre). Si vous ne forcez pas ce comportement, le focus se déplacera vers le premier élément interactif qui se trouve dans le panneau, ou en dehors des onglets.
  • Après avoir lu le contenu d'un panneau il faut idéalement que l'utilisateur puisse facilement retourner à la liste d'onglet pour en sélectionner un autre. Cela peut être difficile quand un onglet contient beaucoup de liens ou un formulaire. La solution préconisée par les WAI-ARIA Authoring Practices 1.1 est d'utiliser les raccourcis clavier ctrl+flèche en ctrl+pageUp en ctrl+pageDownpour basculer d'un onglet à l'autre. Mais ces raccourcis ne fonctionnent pas dans certains navigateurs et entrent en conflit avec les raccourcis clavier de certains lecteurs d'écran.

Résultat

<div id="Tabs">
<ul role="tablist">
  <li role="presentation">
    <a role="tab" tabindex="0" aria-selected="true" aria-controls="tabsdemo-1" 
    id="tabsdemo-1-tab" href="#tabsdemo-1">Dogs</a></li>
  <li role="presentation">
    <a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-2" 
    id="tabsdemo-2-tab" href="#tabsdemo-2">Cats</a></li>
  <li role="presentation">
    <a role="tab" tabindex="-1" aria-selected="false" aria-controls="tabsdemo-3" 
    id="tabsdemo-3-tab" href="#tabsdemo-3">Sheep</a></li>
</ul>
			
<div role="tabpanel" style="display: block;" aria-labelledby="tabsdemo-1-tab" 
id="tabsdemo-1">
  <p>The dog Canis lupus familiaris, is?</p>
</div>

<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-2-tab" 
id="tabsdemo-2">
  <p>The cat (Felis catus), also known as? </p>
</div>
				
<div role="tabpanel" style="display: none;" aria-labelledby="tabsdemo-3-tab" 
id="tabsdemo-3">
  <p>Domestic sheep are quadrupedal?</p>
</div>

Solution prête à l'emploi

Nicolas Hoffmann a encore une fois fait le travail pour vous : jQuery Accessible tab panel system, using ARIA - By Nicolas Hoffmann, et nous recommandons vivement d'utiliser son plugin.

Les onglets de Nicolas Hoffmann

Remarques

  • Le support pour ARIA varie d'un navigateur à l'autre, et d'un lecteur d'écran à l'autre et n'est pas toujours optimal. Les versions les plus récentes offrent le meilleur support, mais ce ne sont pas toujours celles qui sont utilisées par les internautes.
  • Il y a encore pas mal d'utilisateurs de lecteur d'écran qui ne comprennent pas ce que signifie "onglet" et comment ils sont censés interagir avec un tel module. Quand on active un onglet le lecteur d'écran bascule en mode formulaire (ou application). C'est ce qui permet d'utiliser les flèches pour basculer d'un onglet à l'autre. Mais quand on ne le sait pas c'est perturbant.
  • Nous pensons cependant que c'est quand même la meilleure solution dans le long terme. Le web devient plus compliqué et les internautes vont devoir s'adapter pour pouvoir continuer à l'utiliser. AU fur et à mesure que le support des navigateurs et lecteurs d'écran s'améliorera, les utilisateurs vont s'y habituer. Mais pour cela il est crucial que les onglets soient toujours implémentés selon les mêmes principes. Si vous n'utilisez pas le module de Nicolas, veillez à tester vos onglets de manière très approfondie.
  • N'utilisez pas de role="application" car cela empèche un lecteur d'écran d'avoir accès au contenu de l'onglet avec les touches du clavier habituelles. Plus d'infos à ce sujet dans l'article N'utilisez pas role="application".

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>