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
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
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.
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
Quand ne pas l’utiliser
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.
Anatomie
- Onglet actif
- Onglet inactif
- Libellés
- Chevron suivant (ou précédent, à gauche, selon le cas)
- Ligne horizontale
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Onglets (complets)
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.
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.
Les onglets ne peuvent pas inclure des icônes.
L’ordre et le libellé des onglets ne doivent jamais changer.
Libellé
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).
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026