Onglets

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

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

1. Onglet actif
2. Onglet inactif
3. Libellés
4. Chevron suivant (ou précédent, à gauche, selon le cas)
5. Ligne horizontale

Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.

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