Onglets
Utilisation
Présentation
Les onglets permettent aux utilisateurs de naviguer parmi du contenu similaire sur la même page. Par exemple, vous pouvez avoir une série d'onglets intitulés « Obtenir un devis », « Se connecter » et « Sinistres ». Ils permettent d'organiser le contenu en plusieurs catégories, ce qui réduit la charge cognitive de l'utilisateur.
Pour savoir quand utiliser ce composant en détail, consultez l'arbre de décision des composants de l'interface utilisateur suivant :
Formatage
Structure
Les onglets apparaissent dans un ensemble ; chaque onglet possède une étiquette et une section de contenu.
Les onglets comprennent les éléments suivants :
- Étiquette : décrit le contenu de l'onglet. Chaque onglet possède une étiquette qui fournit un contexte à l'utilisateur.
- Zone de contenu : contient le contenu lié à cette catégorie. Le contenu des onglets doit consister en un ensemble cohérent d'éléments ayant un thème commun.
- Indicateur d'onglet actif : apparaît sous un onglet actif. Un seul onglet peut être actif à la fois.
- Icône de chevron : permet aux utilisateurs d'afficher les onglets qui débordent de l'écran.
Contenu
Considérations sur la conception de l'expérience utilisateur
- Le contenu de chaque onglet doit être cohérent et présenter un ensemble de caractéristiques communes.
- Utilisez des étiquettes pour décrire clairement et succinctement le contenu de chaque onglet.
- Les onglets doivent être parallèles par nature, la langue ne doit donc pas être déformée pour les rendre parallèles.
- Les étiquettes des onglets doivent être courtes (1 à 2 mots) et utiliser un langage simple.
- Les étiquettes des onglets doivent être rédigées sous forme rédactionnelle, c'est-à-dire que le premier mot d'une phrase et les noms propres doivent commencer par une majuscule.
Meilleures pratiques
- Utilisez des onglets pour alterner les vues dans un même contexte. Les utilisateurs ne doivent pas avoir à naviguer vers différentes zones. Les onglets leur permettent d'alterner les vues tout en restant sur la même page.
- Découpez le contenu de manière logique afin que chaque utilisateur puisse facilement prévoir ce qu'il va trouver dans chaque onglet.
- Organisez les onglets de manière logique, mais n'utilisez pas d'onglets pour un contenu séquentiel qui doit être lu dans un ordre particulier.
- Par défaut, le premier onglet d'un ensemble est l'onglet actif.
- Évitez d'utiliser plus d'une rangée d'onglets. Nous recommandons généralement de ne pas utiliser plus de six onglets par ensemble.
- N'utilisez les onglets que lorsque les utilisateurs n'ont pas besoin de comparer le contenu entre plusieurs onglets.
- Mettez en évidence l'onglet actuellement sélectionné.
- Assurez-vous que les onglets non sélectionnés sont clairement visibles et lisibles.
- Affichez les onglets en haut du panneau d'onglets, plutôt que sur les côtés ou en bas.
Comportements
États
Les onglets ont les états Survol, Focus et Actif :
- Survol : indique que l'utilisateur a positionné le curseur de la souris sur l'élément (version pour ordinateur de bureau uniquement). Les étiquettes des onglets changent de couleur lorsque l'utilisateur les survole.
- Focus : indique que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la souris.
- Actif : fournit un commentaire indiquant que l'utilisateur clique ou appuie sur l'élément. Les onglets actifs sont soulignés.
Interactions
Clavier
La touche de tabulation déplace le focus vers le premier élément d'onglet de la séquence. Utilisez les touches fléchées pour vous déplacer entre les panneaux à onglets. Si le panneau d'onglets contient des éléments activables (tels qu'un lien ou un bouton), le fait d'appuyer sur la touche TAB déplace le focus sur l'élément activable. S'il n'y a aucun élément focalisable, la touche de tabulation déplace le focus du panneau d'onglets vers le prochain élément focalisable après le composant.
Lecteur d'écran
Les rôles WAI-ARIA de « tablist », « tab » et « tabpanel » sont inclus pour donner du sens aux technologies d'assistance. Lorsqu'un panneau d'onglets est actif, la valeur aria-selected est définie sur « true » pour fournir des informations contextuelles.
Navigation
- Lorsqu'ils interagissent avec des onglets, les utilisateurs n'accèdent pas à des zones différentes. Au lieu de cela, ils alternent les points de vue au sein du même contexte.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Veillez à suivre les conseils expliqués dans cette section ainsi que dans les bonnes pratiques de création conformément à la spécification WAI-ARIA pour les onglets.
Lorsque vous utilisez ce composant dans vos applications :
- Fournissez des titres significatifs et descriptifs pour chaque onglet. Cela aide les utilisateurs à comprendre le contenu de chaque panneau à onglets et permet une navigation efficace.
- Assurez-vous que le contenu de chaque panneau à onglets est accessible, par exemple en utilisant des composants d'en-tête sémantiques, en faisant attention aux contrastes de couleur et en associant un texte aux images.