Onglets

Les onglets sont utilisés pour regrouper et présenter divers aspects d’un sujet. Ils permettent à l’utilisateur de consulter des contenus connexes tout en restant au même endroit dans la page. 

Le premier onglet est sélectionné par défaut et son panneau de contenu est visible. Un seul panneau peut être affiché à la fois.

Exemple


Quand l'utiliser

Les onglets servent à présenter des données. Par exemple, on peut y présenter des statistiques dans une vue graphique et une vue tableau. Les onglets peuvent aussi être utilisés pour présenter différentes informations d’un même sujet, par exemple sur le salaire d’un emploi (salaire horaire, annuel, moyen, etc.). 

On n’utilise pas les onglets si l’utilisateur doit voir le contenu de plusieurs onglets simultanément. En effet, faire des allers-retours entre les onglets augmente la charge cognitive et nuit à l’utilisabilité.

Comment l'utiliser

Le contenu de chaque onglet doit être organisé de façon logique afin que les utilisateurs puissent facilement prédire ce qui se trouve dans l’onglet. 

On peut utiliser entre 2 et 5 onglets. Sur mobile, un maximum de 3 onglets s’affiche. Si la page en contient plus, il faut ajouter les icônes de chevron « Suivant » et « Précédent » pour indiquer le sens du défilement horizontal. 

En plus des informations ci-dessus, les onglets doivent respecter les règles suivantes:

  • Les onglets sont toujours placés au-dessus du panneau auquel ils se rapportent. On ne peut pas les mettre en 
    dessous.
  • Les onglets tiennent sur une ligne. On ne peut pas les superposer sur 2 ou plusieurs lignes. 
  • La couleur d’arrière-plan du panneau est la même que celle de l’onglet sélectionné.
  • Les onglets non sélectionnés sont visuellement distincts de l’onglet sélectionné, tout en respectant les 
    bonnes pratiques habituelles en termes de contraste texte/fond.
  • Les onglets ne peuvent pas inclure des icônes.
  • L’ordre et le libellé des onglets ne doivent jamais changer. Seul le panneau de contenu doit changer.

Comment rédiger les libellés

Le libellé doit être court pour chaque onglet et rédigé dans un langage simple et bien connu du public. Les libellés ne devraient pas être plus longs qu’un ou deux mots et ils doivent avoir une signification sans équivoque.

Si les libellés sont plus longs, c’est un signe que la composante d’onglets n’est pas la bonne pour le contenu.

Les libellés doivent rester logiques et intelligibles lorsqu’ils sont lus séparément (par exemple, par un lecteur d’écran).

Informations techniques

La largeur des onglets est variable, elle dépend de la longueur de leur libellé. La hauteur totale de l’onglet est de 32 px. Il comprend le libellé et le trait sous celui-ci.

Lorsque l’onglet est en état sélectionné ou en survol, la hauteur du trait est de 4 px. Le dégagement entre la barre et le libellé est de 6 px.

Lorsque l’onglet est en état actif, le trait est d’une hauteur de 1 px et le dégagement entre le libellé et le trait est de 9 px. 

Les boutons de défilement horizontal sont d’une hauteur et largeur de 40 px. L’icône à l’intérieur est centrée dans le carré.

La zone de dégagement entre le libellé et le trait est de 8 px de chaque côté sur tous les supports. La zone entre chaque onglet est de 24 px en format bureau et de 8 px au format mobile. 

Sous les boutons de défilement, un dégradé du transparent vers le blanc permet de signifier que les onglets doivent être défilés pour être entièrement visibles

Exemple bureau

Exemple mobile

États

Exemple

CSS de l’onglet actif
font family: Open Sans
font weight: bold
font size: 16px
font color: #223654
line color: #C5CAD2

CSS de l’onglet en survol
font family: Open Sans
font weight: regular
font size: 16px
font color: #223654
line color: #F2F1F1

CSS de l’onglet sélectionné
font family: Open Sans
font weight: bold
font size: 16px
font color: #223654
line color: #095797

Exemple

CSS du bouton actif
background-color: #FFFFFF
icon color: #263652

CSS du bouton en survol
background-color: #F2F1F1

CSS du bouton appuyé
background-color: #DCE6EF

Dernière mise à jour : 9 août 2021