Alias tabs, tabcordions
Les onglets permettent de regrouper ou catégoriser divers aspects d’un sujet dans un même contexte.
Les onglets sont une composante efficace pour contenir différents aspects d'un même sujet. Ils affichent et masquent des contenus sans changer de page. Ils permettent à l'utilisateur de voir les grandes catégories avant de creuser plus loin dans le contenu.
Les onglets sont communément utilisés dans la documentation complexe et les formulaires en plusieurs étapes.
...
Avantages
...
Inconvénients
...
Donne une vue d'ensemble rapide sur les différents contenus disponibles
Permet le dévoilement progressif du contenu à la demande de l'utilisateur
Met en avant l'architecture d'information et éduque le modèle mental de l'utilisateur
Évite le chargement d'une nouvelle page à la différence d'un lien
Réduit la hauteur de la page
...
Requiert une action de l'utilisateur sur chaque onglet qui l'intéresse
Cacher du contenu insinue que le contenu est secondaire (Pensez à des titres évocateurs et attirants)
Le titre d'un onglet doit être assez court. Les titres doivent évoquer des catégories ou des regroupements évident, faciles à comprendre.
Les contenus qui ne sont pas affichés initialement ne sont pas référencés par les moteurs de recherche. (SSO)
Cette documentation ne concerne pas les onglets sous forme de liens dans une navigation sur le Web ou les tab bars utilisés sur les applications. Les onglets sont un outil d'architecture d'information à l'échelle du contenu et non à l'échelle d'un site, d'une application ou d'une sous-section.
Contrairement aux accordéons, le contenu d'un seul onglet peut être affiché à la fois. Il faut donc éviter d'y mettre des contenus qui nécessitent d'être comparés et sauver à l'utilisateur d'y faire des allers-retours.
Contrairement aux filtres, les onglets ne filtrent pas les contenus dynamiquement.
Déclinaisons
Sur les produits radio-canadiens, on ne retrouve que les onglets horizontaux et les accordéonglets (accordéons sur mobile, onglets sur desktop).
...
Élément
...
Description et interactions
...
Groupe d'onglets
...
Le groupe d'onglet est une zone de navigation composée de boutons.
...
Onglet
...
L'onglet est un bouton avec les différents états (focus, survol, désactivé, affiché, masqué) qui permet d'afficher un contenu à la fois.
Le titre est obligatoire et doit être explicite quant au contenu de l'onglet.
Si la longueur du contenu d'un onglet dépasse de beaucoup la hauteur d'un écran, il est à envisager que les onglets restent visibles au défilement (sticky) afin de permettre à l'utilisateur de changer de section sans remonter.
Il est possible d'ajouter une icône avant ou après le titre d'un onglet.
...
Contenu de l'onglet
...
Le contenu de l'onglet est libre, mais devrait être accessoire à la bonne compréhension du contenu principal de la page.
Afficher et masquer
L'utilisateur peut actionné un onglet pour en afficher le contenu.
L'onglet qui se trouve au début selon le sens de lecture doit être l'onglet sélectionné.
Navigation à l’aide du clavier
...
Touches
...
Actions
...
Tab et Maj + Tab
...
Lorsque l’utilisateur accède en tabulant sur le groupe d’onglets, le focus est positionné au niveau de l’onglet sélectionné dans le groupe d’onglets. Lorsque le focus est positionné sur un onglet, la tabulation suivante permet à l’utilisateur de quitter le groupe d’onglets.
...
↑ et ←
...
Lorsque le focus est positionné sur un onglet, les flèches du clavier déplace le focus vers le précédent onglet activable du groupe tout en sélectionnant cet onglet. Si le focus du clavier est positionné au niveau du premier onglet activable du groupe au moment où la touche est pressée. Alors, le focus clavier est déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.
...
↓ et →
...
Lorsque le focus est positionné sur un onglet, les flèches du clavier déplacent le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier onglet activable du groupe au moment où la touche est pressée, le focus du clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.
...
Ctrl + ↑
(facultatif)
...
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet associé à ce panneau.
...
Ctrl + ⇞
(facultatif)
...
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers le précédent onglet activable du groupe et sélectionne cet onglet. Si le focus est positionné au niveau du premier panneau du groupe au moment où la combinaison de touches est pressée, le focus est alors déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.
...
Ctrl + ⇟
(facultatif)
...
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.
...
Alt + Suppr.
(facultatif)
...
Quand l’utilisateur a la possibilité de supprimer un onglet et lorsque le focus est positionné dans un panneau, cette combinaison de touche supprime à la fois le panneau et l’onglet associé à ce panneau. Si au moins un autre onglet activable reste présent dans le module suite à la suppression, le focus ira vers le prochain onglet du groupe.
Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.
...
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité : Meilleures pratiques en matière de l'accessibilité pour onglets |
Références
Embrace the Mental Models of Users by Implementing Tabs (Interaction Design)
Interface à onglets - Boîte à outil de l'expérience Web (Canada, 2015)
Interface à onglets - Configuration de conception (Canada, 2018)
Tabcordions (West Pac Group) (Accordéonglets)
Tabs (Shopify) (Menu déroulant pour les items supplémentaires)
Tabs (Material Design) (Défilement pour les items supplémentaires, incluant les tab bars)
Tabs (Salesforce) (Menu déroulant pour les items supplémentaires et onglets imbriqués)
Tabs (Siemens) (Onglets horizontaux ou verticaux et imbriqués)
Tabs for Mobile UX Design (UX Planet) (Navigation/Tab Bar)
Annexe
...
