Onglets

Dans cette page :

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 40 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 3 px. Le dégagement entre le trait et le libellé est de 4 px. La bordure inférieure grise reste toujours apparente.

Visuel de l'espacement entre les différents éléments de l'onglet

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

Hauteur de l'onglet et espace de dégagement entre le libellé et le trait

La zone de dégagement horizontale 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.

Entre les boutons de défilement et la barre d'onglets, 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 des espace de dégagement entre chaque onglets et les boutons de défilement

Exemple mobile

Exemple de l'espace de dégagement des onglets sur mobile

États des onglets

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

CSS de l’onglet en survol
font-family: Open Sans
font-weight: regular
font-size: 16px
font-color: #095797
border-bottom: 1px solid #c5cad2
box-shadow: 0px -3px 0px #f1f1f2 inset

CSS de l’onglet sélectionné
font-family: Open Sans
font-weight: bold
font-size: 16px
font-color: #223654
border-bottom: 1px solid #c5cad2
box-shadow: 0px -3px 0px #095797 inset