1. Accueil  
  2. Design  
  3. Composants  
  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 sont utilisés pour présenter des contenus liés, de même niveau hiérarchique. Ces contenus peuvent être de nature informationnelle ou statistique. Par exemple, dans une page de réglementation sur la pêche, on pourrait afficher des onglets « Pêche au Saumon », « Pêche au Doré », « Pêche à la ligne ou à la mouche » et « Autres types de pêches » pour consulter les règlements spécifiques à chaque type. On pourrait également avoir les onglets « Au Canada » et « Au Québec » pour décrire les taux de placement dans un domaine d’emploi.

On peut également utiliser les onglets pour afficher une même donnée sous différentes formes. Par exemple, le pourcentage de la population dans chaque région du Québec pourrait être consulté en tant que graphique ou tableau de données.

On n’utilise pas les onglets pour présenter de l’information séquentielle, c’est-à-dire, par étape, ni pour segmenter le contenu d’une page qui ne devrait pas l’être. Par exemple, avoir un onglet pour chaque section d’une page de contenu. Il est important d’identifier les habitudes de consultation des contenus pour éviter les allers-retours inutiles entre les onglets.

Voici quelques exemples de cas où les onglets sont appropriés :

  • Consulter la programmation d’un événement par journée
  • Rechercher un musée par lieu ou par nom
  • Consulter les réglementations de chasse en vigueur selon le type de gibier

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 (environ 15 caractères) et ils doivent avoir une signification sans équivoque.

Si les libellés sont plus longs, c’est un signe que le composant d’onglets n’est pas le bon 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.

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

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 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;

CSS de l’onglet au focus
outline: 2px solid #4a98d9;

États des boutons

CSS du bouton actif
background-color: #ffffff;

 

 

CSS du bouton en survol
background-color: #f1f1f2;

CSS du bouton appuyé
background-color: #dae6f0;

CSS du bouton au focus
background-color: #dae6f0;
outline: 2px solid #4a98d9;
border: 2px solid #223654;

Dernière mise à jour : 17 mars 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec