ARIA : rôle tabpanel

Description

Le rôle tabpanel indique que l'élément est un conteneur pour les ressources associées à un rôle tab, où chaque onglet (tab) est contenu dans une tablist.

Un tabpanel fait partie d'une interface à onglets, un modèle d'expérience utilisateur·ice courant où un groupe d'onglets visuels permet de basculer rapidement entre plusieurs vues superposées. Chaque onglet est défini avec le rôle tab, et ces onglets sont contenus dans un élément avec le rôle tablist. Le tablist est souvent positionné visuellement au-dessus ou sur le côté d'une zone de contenu, contenant les tabpanel associés. Le rôle tabpanel est attribué au conteneur de chaque panneau de contenu associé à un onglet correspondant dans la tablist de l'interface à onglets.

Dans de nombreuses interfaces à onglets, un seul tabpanel est visible à la fois. Cependant, certaines interfaces peuvent nécessiter l'affichage de plusieurs panneaux simultanément. Dans ce cas, la tablist doit porter l'attribut aria-multiselectable, et les éléments tab utilisent alors l'attribut aria-expanded pour indiquer si leur tabpanel associé est visible ou non. L'état sélectionné de l'onglet sert à indiquer quel panneau est actuellement « actif ». Par exemple, cela peut indiquer vers quel tabpanel la sélection clavier se déplace si quelqu'un appuyait sur la touche Tab alors qu'un onglet est sélectionné dans une tablist à sélection multiple.

Dans les interfaces à sélection unique, seul le tabpanel associé à l'onglet sélectionné est affiché. Tous les autres éléments tabpanel associés aux onglets non sélectionnés doivent être masqués pour les utilisateur·ice·s. Ainsi, lorsque la sélection d'onglet change, le panneau affiché change également, tandis que le panneau précédemment affiché devient masqué.

Dans les interfaces à sélection multiple, plusieurs éléments tabpanel peuvent être affichés, selon l'état développé de leurs onglets associés.

Les onglets ne servent pas de liens d'ancrage vers des panneaux individuels : lors de l'activation, la sélection clavier doit rester sur l'onglet courant et ne pas se déplacer automatiquement vers le tabpanel nouvellement affiché. Bien qu'une interface à onglets puisse être améliorée progressivement à partir d'un modèle de balisage sous-jacent avec des liens internes pointant vers les sections de contenu associées, lorsque JavaScript est utilisé pour transformer ces éléments en interface à onglets, le comportement par défaut des liens doit être empêché. Idéalement, cela peut être fait en supprimant ou modifiant l'attribut href, ce qui a l'avantage de retirer les options spécifiques aux liens du menu contextuel du navigateur.

Lorsque la sélection clavier est sur une tablist ou un onglet dans la tablist, la touche Tab doit être programmée pour déplacer la sélection du tab sélectionné (qui peut ou non être l'onglet actif) vers le tabpanel qui représente l'onglet actuellement sélectionné.

Chaque onglet (tab) dans une tablist peut servir d'étiquette à son tabpanel correspondant. Indiquez l'id de chaque onglet comme valeur de l'attribut aria-labelledby de chaque tabpanel.

Vous pouvez aussi associer chaque tabpanel à son onglet en incluant l'id du tabpanel comme valeur de l'attribut aria-controls de l'onglet.

Lorsqu'une interface à onglets est initialisée, un tabpanel est affiché et son onglet associé est mis en forme pour indiquer qu'il est actif, reflétant son état programmatique. Tous les éléments tabpanel inactifs doivent être masqués pour tous les utilisateur·ice·s, le plus souvent avec la propriété CSS display: none.

Voir l'article sur le rôle ARIA tab pour plus d'informations spécifiques à l'utilisation de ce rôle.

Ajoutez tabindex="-1" pour permettre à un tabpanel de recevoir la sélection sans l'inclure dans l'ordre de tabulation de la page.

Veillez à définir des styles pour un tabpanel lorsqu'il reçoit la sélection, idéalement avec la pseudo-classe CSS :focus, afin que les utilisateur·ice·s au clavier sachent qu'il y a eu un changement de sélection et soient informé·e·s du contenu actuellement sélectionné.

Les carrousels peuvent être créés avec ce modèle d'onglets : les contrôles de sélection de diapositive peuvent être balisés comme des onglets (tabs) dans une tablist, la diapositive étant représentée par un élément tabpanel.

Si un panneau d'onglet est vide (par exemple, parce que ses données sont encore en cours de chargement ou que l'enregistrement est vide), il existe trois options :

• Garder le panneau vide accessible et sélectionnable avec tabindex="0" et préserver son nom accessible
• Afficher un contenu expliquant l'état, tel que « Chargement... » ou « Aucun résultat »
• Supprimer l'onglet et le panneau du DOM

Il n'existe aucune exigence ARIA spécifique aux panneaux vides. Le choix entre ces approches relève principalement d'une décision de conception produit. En général, évitez les panneaux vides, car ils sont déroutants à la fois pour les utilisateur·ice·s voyants et pour les utilisateur·ice·s de lecteurs d'écran (les lecteurs d'écran peuvent annoncer le nom du panneau suivi de rien). Supprimer l'onglet et le panneau évite un élément supplémentaire à parcourir, mais peut être déroutant si les utilisateur·ice·s s'attendent à ce que cet onglet existe (par exemple, parce que le même ensemble d'onglets est apparu plusieurs fois) ou si l'onglet apparaît plus tard (par exemple, parce qu'il est encore en cours de chargement).

Rôles et attributs associés

Le rôle tab

Contrôle la visibilité du tabpanel associé.

Le rôle tablist

Groupe d'éléments tab.

aria-labelledby

Fournit un nom accessible. Référence l'onglet qui contrôle le panneau.

aria-expanded

Doit être utilisé sur les onglets nécessaires si une tablist à sélection multiple est utilisée.

Interactions au clavier

Voir les interactions clavier de tablist dans la définition du rôle tablist.

Exemple

Voir l'exemple tabpanel, tab et tablist dans la définition du rôle tab.

Spécifications

Voir aussi

• ARIA : rôle tab
• ARIA : rôle tablist
• Exemple : onglets à activation automatique ^(angl.) - W3C
• Exemple : onglets à activation manuelle ^(angl.) - W3C