1. Accueil  
  2. Composantes  
  3. Navigation  
  4. Onglets

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 que 2 ou 3 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 des onglets

CSS de l’onglet actif
font-family: Open Sans
font-weight: bold
font-size: 16px
font-color: #223654
border-bottom: 1px solid #c5cad2

CSS de l’onglet en survol
font-family: Open Sans
font-weight: regular
font-size: 16px
font-color: #223654
border-bottom: 4px solid #f2f1f1

 

 

CSS de l’onglet sélectionné
font-family: Open Sans
font-weight: bold
font-size: 16px
font-color: #223654
border-bottom: 4px solid #095797

CSS de l’onglet au focus
font-family: Open Sans
font-weight: bold
font-size: 16px
font-color: #223654
outline : 2px solid #4a98d9
border-bottom: 4px solid #095797

États des boutons

CSS du bouton actif
background-color: #ffffff

 

 

CSS du bouton en survol
background-color: #f2f1f1

CSS du bouton appuyé
background-color: #dce6ef

CSS du bouton au focus
background-color: #dce6ef
outline: 2px solid #4a98d9
border: 2px solid #5b6476

Dernière mise à jour : 16 août 2022