Onglets

Une interface à onglets permet de regrouper des informations via un système d’étiquettes. En sélectionnant un onglet, les contenus associés sont affichés.

En règle générale, les onglets sont présentés horizontalement, mais ils peuvent également être ancrés verticalement.

A quoi ressemblent les interfaces à onglets ?

Cette vidéo présente une interface à onglets typique. Le lecteur d'écran NVDA est activé pour permettre de se familiariser avec l'expérience utilisateur d'un aveugle ou malvoyant.

Description vidéo

Sur le site Web sas.com, une interface à onglets présente diverses visualisations de données.

  • L'utilisateur tabule jusqu'au premier onglet de la liste ; le mot "Registerkarte" est annoncé ("tabuler" en allemand) ;
  • Le lecteur d'écran annonce le titre du premier onglet ("Net Operating Income") ainsi que son rôle (tab), son état, et le nombre d'onglets dans l'interface à onglets ;
  • L'utilisateur tabule jusqu'à l'onglet suivant avec la touche TAB  →.
  • L'utilisateur valide sur ENTER pour sélectionner l'onglet et afficher les contenus associés.

Quels sont les différents modèles d'interfaces à onglets ?

Il existe deux types d'interfaces à onglets: des onglets activés automatiquement et des onglets activés manuellement. Pour ceux qui s'activent automatiquement, il suffit de tabuler pour visualiser les contenus présentés sur les différents onglets. Pour ceux qui s'activent manuellement, l'utilisateur doit tabuler pour sélectionner l'onglet à afficher, eet ensuite appuyer sur la barre d'espace ou ENTER pour ouvrir l'onglet.

Autre distinction importante : les interfaces à onglets peuvent être conçues en suivant les motifs de conception ARIA pour offrir un comportement similaire à celui des onglets que l'on rencontre dans des applications natives. Dans ce cas, les onglets sont activés avec les touches flèches et non pas la touche TAB. Autre cas de figure : les onglets sont implémentés comme des éléments de liste (ou des boutons) et activés avec la touche TAB. Cette dernière implémentation est la plus courante sur le Web aujourd'hui.

Quelles sont les difficultés rencontrées par les utilisateurs face aux interfaces à onglets

Les interfaces à onglets posent problème à de nombreux utilisateurs.

Ne pas savoir quand utiliser les flèches pour naviguer entre les onglets

Lorsqu'on arrive sur une interface à onglets créée avec motif de conception ARIA 1.1, le fait de tabuler déplace par défaut le focus sur le premier onglet (ou le dernier onglet sélectionné). Ensuite, pour naviguer entre les onglets il faut utiliser les flèches
→. Cette interaction n'est pas forcément attendue et peut perturber l'utilisateur. Les développeurs peuvent contourner ce problème en rendant la sélection de chaque onglet également possible via la touche TAB.

Ne pas comprendre les indications du lecteur d'écran quant aux modes d'interaction

Comme Alastair Campbell a pu le souligner, les tests utilisateurs indiquent que de nombreux utilisateurs ne sont pas encore familiers avec le comportement d'un onglet conçu avec un motif de conception ARIA, leur implémentation étant encore chose très rare aujourd'hui. Certains utilisateurs peuvent confondre l’élément "tab" (avec role="tab") avec le fait de tabuler (avec la touche TAB). Note : Cette confusion n'a pas lieu en français, les lecteurs d'écran indiquant le mot "onglet" et non "tab".

Ne pas voir des contenus des onglets cachés

Si l'interface d'onglets n'est pas correctement codé selon la spécification WAI ARIA, les utilisateurs aveugles peuvent avoir du mal à identifier la nature du composant et passer à côté de contenus présentés sur les onglets cachés. Les utilisateurs qui naviguent avec des technologies d'assistance ou des navigateurs anciens qui ne restituent pas les rôles tablist et tab peuvent également se trouver face au même problème.

Passer à côté des contenus présentés sur l'onglet actif

Un autre problème rencontré par des utilisateurs naviguant avec des lecteurs d'écran est le fait de passer à côté de contenus présentés sur l'onglet actif, notamment quand ces éléments ne reçoivent pas le focus. En arrivant sur le tablist via les flèches et en étant en mode "lecture", le lecteur d'écran bascule en mode "formulaires". Pour lire les contenus de l'onglet, les utilisateurs doivent repasser en mode "lecture". JAWS annonce un raccourci pour arriver sur l'onglet, mais NVDA et VoiceOver ne le font pas. En conséquence, le fait de tabuler déplace l'utilisateur vers le premier élément interactif. Heydon Pickering propose d'utiliser la flèche bas pour déplacer le focus.

Rencontrer des difficultés de linéarisation des contenus

es utilisateurs qui parcourent la page du haut en bas de manière linéaire, que ce soit avec un lecteur d'écran ou une feuille de style personnalisée, voient en premier lieu les onglets dans une section, suivi par les contenus des onglets dans une section à part. Savoir quels contenus proviennent de quels onglets peut s’avérer complexe. Ce problème peut être résolu en utilisant des onglets implémentés comme des liens d'évitement et en choisissant des titres pertinents.

Quelques exemples de difficultés rencontrées par les utilisateurs

Voici quelques exemples de barrières courantes lors de l'accès aux interfaces d'onglets auxquelles font face les utilisateurs en situation de handicap.

1 Interaction clavier : l'impossibilité d'accéder aux contenus

Quelques interfaces à onglets sont accessibles uniquement à la souris. Les utilisateurs qui naviguent au clavier perdent le focus et ne parviennent pas à accéder ni à sélectionner les autres onglets du tablist.

Description vidéo

L'interface à onglets présentée sur le site institutionnel de bahn.de n'est pas accessible au clavier.

  • L'utilisateur naviguant au clavier active la fonctionnalité "forcer le focus" ;
  • L'utilisateur tabule dans la navigation principale et arrive au lien permettant de se connecter à son compte ;
  • Le focus se déplace directement sur les contenus de l'onglet "Reiseauskunft", en sautant le tablist.

2 Utilisateurs naviguant au clavier & au lecteur d'écran : comportement clavier inattendu

Quand un menu de navigation est implémenté comme interface à onglets alors qu'il ressemble à un menu classique, les utilisateurs naviguant au clavier s’attendront à pouvoir se servir de la touche TAB pour passer d'élément en élément. Cela sera impossible si le composant est conforme au motif de conception. Seulement les flèches → ← permettront de passer d'élément en élément.

Description vidéo

Ce test utilisateur montre le comportement de la navigation principale de familyreunion-syria.diplo.de dans le navigateur Firefox avec le lecteur d'écran NVDA activé et en naviguant au clavier.

  • En tabulant dans la navigation principale, le premier élément du menu, Startseite prend le focus.
  • En continuant de tabuler, le focus se déplace non pas dans les éléments de menu mais aux contenus qui suivent l'interface à onglets.
  • L'utilisateur repositionne le focus sur la navigation principale et essaie la touche flèche gauche →  à la place
  • Le lecteur d'écran vocalise chacune des lettres de l'intitulé de lien.

Comment créer des interfaces à onglets accessibles ?

Les systèmes d'onglets conçus avec le motif de conception WAI-ARIA

  • Ouvrir les onglets par activation automatique ou activation manuelle. Décider si vos onglets devraient s'ouvrir en tabulant dessus ou seulement après avoir sélectionné l'onglet.
  • Utiliser les rôles (tablist, tab, tabpanel), et les attributs, notamment aria-selected pour indiquer l'état de l'onglet actif. L'attribut aria-controls peut également être utilisé pour indiquer l'id de l'onglet actif, mais il ne sera pas toujours bien supporté.
  • Utiliser role="presentation" sur les éléments de liste (li) dotés d'un nouveau rôle (par exemple role="tab"). Cela permet d'éliminer la sémantique de liste qui vient polluer les rôles ARIA dans ce contexte.
  • Respecter le modèle d'interactions au clavier. Flèches gauche/droite pour parcourir les onglets. La prise de focus doit se déplacer dans la liste des onglets. Si les onglets sont implémentés comme liens, penser à utiliser un objet JavaScript KeyboardEvent pour que la touche ESPACE permette d'ouvrir les onglets.
  • Utiliser l'attribut aria-labelledby pour identifier chaque onglet. Lorsqu'un utilisateur de lecteur d'écran tabule sur un onglet, l'étiquette associée sera annoncée et l'utilisateur saura sur quel onglet il/elle se trouve.
  • Faire en sorte que les contenus des onglets puissent recevoir le focus. S'il n'existe pas d'éléments recevant le focus sur l'interface à onglets, ou si le premier élément est précédé d'informations importantes, penser à inclure l'attribut tabindex="0". Autre solution: utiliser la flèche du bas pour déplacer le focus.
  • Donner des indications. Certains spécialistes préconisent l'insertion d'un petit texte avant le tabpanel qui est visible à tous lorsqu'il prend le focus, type "Utiliser les touches flèches pour sélectionner les onglets". Ce texte peut être relié au tabpanel via l'attribut aria-describedby.

Des interfaces à onglets accessibles à la tabulation

Les interfaces à onglets conçues sans motifs de conception ARIA sont composées d'une liste de liens ou de boutons, normalement présentés horizontalement ; l'utilisateur se déplace en tabulant.

  • Utiliser les rôles (tablist, tab, tabpanel), même si l'interaction clavier n'a pas le même comportement.
  • Si les onglets contiennent des contenus interactifs, opter pour une activation manuelle plutôt qu'une activation automatique. Lorsque les onglets s'affichent à la prise de focus (activation automatique), les contenus interactifs ne peuvent pas être positionnés directement dans le panneau sauf s'ils figurent directement après le nom de l'onglet dans le code source. Dans ce cas, il faudrait tabuler dans l'ensemble des contenus interactifs avant de pouvoir afficher l'onglet suivant.
  • Au moment d'activer un lien ou un bouton, déplacer le focus sur le contenu présenté en début d'onglet via un ancre ou un script. Lorsqu'il s'agit d'un contenu non-interactif comme un titre, le fait de lui attribuer un tabindex="-1" permet d'améliorer sa restitution par les navigateurs et technologies d'assistance.
  • Indiquer l'état de chaque onglet via un attribut (élément actif, élément caché, etc.). L'attribut aria-selected peut être utilisé pour des boutons ou des liens avec un role="tab".

Pour aller plus loin

Bonnes pratiques : quelques exemples (en anglais)

Articles sur les avantages et inconvénients des tabpanel, et les meilleurs méthodes d'implémentation (en anglais)