Onglets

Owned by MATHIEU Côté
Last updated: May 08, 2023
5 min read

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é.

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.

Les commandes notées comme facultatives doivent faire l'objet d'une évaluation par rapport au besoin et au coût de développement.

Références

Annexe

Accordéonglets pour la météo et les conditions routières sur les pages régionales