Panneaux à onglets

Les panneaux à onglets présentent plusieurs contenus en panneaux superposés, navigables depuis des onglets. Seul le panneau d’onglet actif est visible et exposé aux outils d’adaptation.

Les panneaux à onglets sont souvent imités visuellement avec de simples liens. Toutefois, cette façon de faire crée de la confusion pour les personnes utilisant un lecteur d’écran. L’emploi d’attributs ARIA, détaillé dans la section Explications techniques, permet au lecteur d’écran d’identifier clairement ces éléments comme des onglets et d’annoncer l’onglet actif parmi la liste.

Enfin, les panneaux à onglets font partie des composants qui entraînent l’activation du mode « interactif » (ou applicatif) de certains lecteurs d’écran. En effet, pour utiliser les touches clavier assurant les déplacements dans la liste d’onglets, il est nécessaire de sortir du mode navigation, qui assigne à ces touches une fonction différente. Le basculement vers le mode interactif ou applicatif sera confirmé par un signal sonore émis par le lecteur d’écran.

Voici les principaux comportements attendus avec les outils d’adaptation (lecteurs d’écran, commandes vocales, etc.) ainsi que la navigation au clavier :

• Les onglets sont reconnus et annoncés comme tels par les outils d’adaptation.
• L’onglet actif est annoncé par les lecteurs d’écran.
• La navigation parmi les onglets répond aux interactions clavier prévues pour ce composant :
  • Dans la liste des onglets, seul l’onglet actif est focusable avec Tabulation. Les autres onglets sont navigables avec les touches fléchées (voir point suivant).
  • Pour des onglets orientés horizontalement, les flèches gauche et droite assurent le passage d’un onglet à l’autre. Pour des onglets orientés verticalement, il s’agit des flèches haut et bas.
  • Les touches Entrée ou Barre d’espacement assurent l’activation d’un onglet si celui-ci n’est pas activé automatiquement lorsqu’il reçoit le focus.
  • (Optionnel) Les touches Début et Fin permettent d’atteindre respectivement le premier et le dernier onglet.
• Le panneau d’onglet actif est focusable avec la touche Tabulation. Cela facilite notamment l’accès au panneau pour les personnes utilisatrices de lecteur d’écran ou de navigation au clavier.
  • Remarque : Dans son Guide des pratiques de conception ARIA, le W3C précise que cette mesure est nécessaire si aucun élément focusable ne figure dans le panneau d’onglet actif ou que le premier élément de contenu n’est pas focusable. Cependant, nous recommandons de procéder ainsi en tout temps, pour assurer une cohérence des interactions peu importe la structure des contenus.
• Le début et la fin du panneau d’onglet actif est perceptible avec les lecteurs d’écran.
  • Remarque : Ces informations de contextualisation connaissent un support limité parmi les lecteurs d’écran. Un ajout de convivialité est proposé à cet effet dans la section Préoccupations complémentaires d’utilisabilité.
• (Recommandé) À la fin des contenus du panneau d’onglet actif, un lien visible au focus du clavier permet de retourner sur le premier onglet de la liste des onglets.

Rôles, états et propriétés ARIA

• L’élément qui sert de conteneur pour l’ensemble des onglets a un attribut role avec la valeur tablist.
• Chaque élément qui sert d’onglet a un attribut role avec la valeur tab. Cet onglet est lui-même contenu dans l’élément à qui on a appliqué role="tablist".
• Chaque élément qui englobe le contenu du panneau d’un onglet a un attribut role avec la valeur tabpanel.
• Chaque élément ayant le rôle d’onglet (tab) possède l’attribut de propriété aria-controls, dont la valeur correspond à l’identifiant unique (ID) du panneau d’onglet associé (tabpanel).
• L’élément d’onglet actif a l’attribut d’état aria-selected défini sur true. Tous les autres onglets ont aria-selected défini sur false.
• Chaque élément ayant un rôle de panneau d’onglet (tabpanel) reçoit l’attribut de propriété aria-labelledby, dont la valeur correspond à l’identifiant unique (ID) de son élément d’onglet associé (tab).
• Si la présentation visuelle des onglets est orientée verticalement, le conteneur à qui on a assigné role="tablist" reçoit également un attribut de propriété aria-orientation défini sur vertical. Notons que la valeur par défaut de aria-orientation pour un élément tablist est horizontale. Il est donc inutile de le préciser si c’est le cas.

Autres considérations techniques

• Divers aspects sont gérés par JavaScript, notamment :
  • Les interactions au clavier permettant de naviguer dans la liste d’onglets (voir la section Critères fonctionnels).
  • Le changement dynamique de la valeur de l’attribut aria-selected, selon que l’onglet est sélectionné (valeur true) ou non (valeur false).
  • L’affichage et le masquage dynamique des panneaux d’onglets, pour afficher uniquement le panneau correspondant à l’onglet actif.
  • Le changement de la valeur de l’attribut tabindex donnée aux onglets et aux panneaux d’onglets, comme décrit précédemment.
• La mise en forme CSS display:none est appliquée aux panneaux d’onglets non visibles, ce qui permet également de les masquer aux outils d’adaptation. De plus, cette mise en forme évite que des contenus focusables inclus dans les panneaux d’onglets masqués soient inclus dans le parcours de tabulation.
• Dans la liste d’onglets, seul l’onglet actif (tab) doit être focusable avec la touche Tabulation. Auquel cas, si l’élément recevant le rôle d’onglet n’est pas déjà nativement focusable, il convient de lui assigner tabindex="0". Tous les autres onglets (inactifs) sont retirés du parcours de tabulation avec tabindex="-1".
• Chaque panneau d’onglet actif (tabpanel) est rendu focusable au clavier en lui attribuant tabindex="0". 
  • Remarque : les panneaux d’onglets inactifs peuvent, au choix, porter un tabindex="-1" ou un tabindex="0", puisque la mise en forme CSS display:none qui leur est assignée retire d’emblée ces panneaux et leurs contenus du parcours de tabulation.
• Dans les sites Web adaptatifs, une pratique courante consiste à utiliser des panneaux à onglets en affichage grand écran, mais à transposer la même information dans des accordéons, pour l’affichage petit écran. Dans ce cas de figure, il est essentiel :
  • De respecter les critères fonctionnels et techniques de chaque composant utilisé (onglets ou accordéons), dans les affichages respectifs;
  • De s’assurer que le balisage structurel, les attributs ARIA et les comportements gérés par scripts s’adaptent correctement lors du passage de l’un à l’autre des composants, à la suite d’un redimensionnement de la fenêtre du navigateur ou d’un agrandissement de la taille du texte.

Faciliter le repérage de la fin des panneaux d’onglets et le retour à la liste des onglets

À la suite de tests utilisateurs, nous avons relevé certains enjeux d’utilisabilité dans les modèles courants de panneaux à onglets qui respectent les requis d’accessibilité :

1. Pour les personnes utilisatrices de lecteurs d’écran :
   • Il est parfois difficile de percevoir les frontières du panneau d’onglet, et plus particulièrement, la fin de celui-ci. En effet, pour le moment, seules les versions récentes de JAWS annoncent le début et la fin d’un panneau d’onglet (à partir de JAWS 2023, mise à jour de décembre). Le manque de support de ces informations de contextualisation par la majorité des lecteurs d’écran peut alimenter la confusion entre les contenus qui appartiennent au panneau d’onglet et ceux qui figurent à l’extérieur de celui-ci.
   • Le retour à la liste des onglets est souvent fastidieux après avoir terminé la lecture d’un panneau. En effet, il n’existe pas de mécanisme spécifique prévu pour cela. Dans le cas de l’exemple présenté, un titre (niveau d’en-tête) précède le composant, ce qui peut servir d’ancrage pour faciliter le retour. Cependant, cette structure n’est pas toujours possible ou présente dans la page.
2. Pour d’autres clientèles naviguant au clavier, le retour à la liste des onglets gagne aussi à être facilité. Si le panneau d’onglet contient des contenus focusables (liens, éléments de formulaire, etc.), l’utilisateur doit multiplier les retours de tabulation (Maj+Tabulation) pour remonter à la liste des onglets.

Ajouts suggérés

À la fin du panneau d’onglet courant (mais à l’intérieur de celui-ci) :

• Insérer une mention hors écran « Fin des contenus de cet onglet. »
• Faire suivre cette mention d’un lien « Retour à la navigation des onglets. » Ce lien demeure visuellement caché (hors écran) jusqu’à ce qu’il reçoive le focus clavier. Il pointe vers l’identifiant du premier onglet de la liste d’onglets.

Cet ajout rend la navigation plus conviviale, tout en limitant la redondance perçue avec la mention « Fin du panneau à onglet » faite par les plus récentes versions de JAWS. Nous avons volontairement omis d’ajouter une mention similaire pour le début du panneau, car la fin de la liste d’onglets marque implicitement le début du panneau.

Voici un exemple de code HTML résultant (extrait) :

[...]
<p>
<span class="sr-only">Fin des contenus de cet onglet.</span>
<a href="#label_tabpanel_1" class="sr-only-focusable">Retour à la navigation des onglets.</a>
</p>
</div><!-- Fermeture du DIV ayant le rôle de tabpanel -->

Nous avons effectué certains ajustements d’accessibilité et d’utilisabilité sur ce modèle, tenant compte des aspects traités dans la présente fiche :

• Gestion du focus : Le panneau d’onglet (tabpanel) courant est désormais focusable avec Tabulation, grâce à l’ajout de tabindex="0". Les autres panneaux non exposés aux utilisateurs reçoivent un tabindex="-1" et sont absents du parcours de tabulation.
  • Remarque : Le script d’origine de Van11y prévoit la possibilité de rendre focusable le premier titre (niveau d’en-tête) figurant dans le panneau d’onglet courant. Cependant, comme mentionné dans la partie Explications techniques, l’approche reposant sur la mise en focus d’un contenu interne au panneau est moins robuste : elle peut créer un manque de cohérence dans les interactions, si la structure change d’un panneau d’onglet à l’autre.
• Ajouts de convivialité : Insertion d’une mention hors écran de fin des contenus de l’onglet, ainsi que d’un lien de retour vers la liste des onglets. Pour plus de détails, voir la section Préoccupations complémentaires d’utilisabilité.