Nouveau Components

Panneau d’onglet

Un panneau d’onglet est un composant de l’interface utilisateur qui permet aux utilisateurs de basculer entre différentes sections de contenu en cliquant simplement sur des onglets.

En général, chaque panneau d’onglet contient une seule section de contenu, et un seul panneau d’onglet peut être visible à la fois. Bien que les onglets soient le plus souvent placés en haut du contenu, ils peuvent également être positionnés sur les côtés ou en bas. Les panneaux d’onglets sont largement utilisés dans les applications web, les logiciels et les interfaces graphiques afin d’organiser le contenu et de faciliter l’accès des utilisateurs aux informations dont ils ont besoin.

Quand l’utiliser

Les onglets permettent de structurer et de présenter plusieurs sections de contenu liées en affichant une seule section à la fois dans un espace limité, la première section étant la plus importante.

Liste de vérification pour décider d’utiliser un panneau d’onglets :

  1. Votre contenu peut être séparé de manière logique en sections distinctes et clairement étiquetées.
  2. La première section est plus importante que les autres.
  3. Les utilisateurs n’auront généralement pas besoin d’accéder à toutes les sections en même temps.

Quand ne pas l’utiliser

  1. Navigation : évitez d’utiliser un panneau d’onglets si votre intention est de l’utiliser comme moyen de navigation entre des pages.
  2. Contenu séquentiel : si le contenu de chaque panneau doit être consulté dans un ordre précis.
    Exemple : un guide étape par étape expliquant comment ouvrir un compte.
  3. Comparaisons : si une comparaison entre le contenu de différents onglets est nécessaire.
    Exemple : un onglet par modèle de voiture dans une concession.
  4. Contenu long : les onglets sont plus efficaces avec un contenu court et concis. Si un onglet nécessite un défilement important, cela va à l’encontre de leur objectif : offrir une présentation épurée.
  5. Petites résolutions d’écran : la liste des onglets est généralement placée au-dessus du panneau, avec les boutons alignés côte à côte. Sur les petits écrans, cela peut provoquer un défilement horizontal, ce qui empêche la mise en page de s’adapter correctement (reflow).

Choisir entre des onglets et des accordéons

Les onglets et les accordéons peuvent tous deux être utilisés pour masquer des sections de contenu et permettre à l’utilisateur d’afficher uniquement les informations dont il a besoin.

Keyboard navigation function table
En faveur des onglets En faveur de l’accordéon
Tout le contenu est étroitement lié ou parallèle. Une quantité importante de contenu doit être structurée dans un espace restreint.
Toutes les informations ne doivent pas être consultées en même temps. La lecture séquentielle n’est pas vitale.
Toutes les informations n’ont pas besoin d’être consultées en même temps. La lecture séquentielle n’est pas indispensable.
Les utilisateurs doivent pouvoir passer rapidement d’un contenu à l’autre. Les utilisateurs peuvent avoir besoin d’ouvrir plusieurs sections en parallèle pour comparer le contenu.
La quantité de contenu dans chaque onglet est relativement légère.
Le contenu d’un onglet spécifique doit être priorisé en étant affiché en premier.

Sur cette page

Fichiers et éléments Figma

Les designers peuvent importer tous les documents de design depuis notre dépôt Figma en utilisant le lien fourni ci-dessous. Cela simplifie le processus de conception et garantit un accès facile aux ressources graphiques les plus récentes pour un flux de travail plus efficace.


N’hésitez pas à utiliser l’aperçu interactif du prototype ci-dessous comme exemple pratique et démonstration du fonctionnement attendu du composant. Cette représentation interactive sert de guide visuel pour vous aider à comprendre le comportement et les fonctionnalités prévues.

Panneau d’onglets

Conception

Ressources

Ecran d'ordinateur

Tablette

Mobile

Panneau d’onglets latéral

Conception

Prototype

Conception

Ecran d'ordinateur

Tablette

Mobile

Sur cette page

Mots-clés

  • Liste d’onglets (Tablist) : un conteneur regroupant plusieurs onglets.
  • Onglet (Tab) : un bouton qui déclenche l’affichage d’un panneau.
  • Onglet actif (Active Tab) : le bouton représentant le panneau d’onglet actuellement affiché.
  • Panneau (Panel) : un conteneur qui contient le contenu du panneau d’onglet.
  • Titre (Title) : un nom accessible.

Décomposition des composants

Liste d’onglets

  • Une liste d’onglets est un conteneur qui regroupe plusieurs boutons d’onglets, chacun correspondant à une section de contenu.
  • Pour déclarer un conteneur comme liste d’onglets, appliquez-lui l’attribut role="tablist". Ce conteneur doit regrouper tous les boutons d’onglets.
  • Fournissez toujours un titre à la liste d’onglets. Ce titre nomme l’ensemble du panneau d’onglets et aide les utilisateurs de lecteurs d’écran à comprendre son contenu. Utilisez soit aria-label, soit aria-labelledby pour créer ce titre.
  • Si un titre visible existe déjà sur la page, utilisez aria-labelledby pour l’associer à la liste d’onglets, afin de le rendre aisément accessible aux utilisateurs de lecteurs d’écran.
HTML
<h3 id="tablist-title">Documents accessibles</h3>
<div role="tablist" aria-labelledby="tablist-title">...</div>

Onglet

  • Créez des boutons d’onglets en utilisant les balises HTML natives <button>.
  • Chaque bouton doit être identifié comme onglet grâce à l’attribut ARIA role="tab" qui indique qu’il fait partie d’une liste d’onglets et qu’il affiche le panneau associé lorsqu’il est activé.
  • Focus clavier : assurez-vous que les boutons d’onglets affichent un indicateur de focus visible lors de la navigation au clavier, par exemple une bordure de 2 px autour du bouton.
  • Ajoutez l’attribut aria-selected à chaque onglet.
  • Pour l’onglet actif, utilisez aria-selected="true" et laissez-le accessible au clavier.
  • Pour les onglets inactifs, définissez aria-selected="false" et tabindex="-1" afin d’indiquer qu’ils ne sont pas actifs, que leur contenu est masqué, et qu’ils sont exclus de la navigation clavier jusqu’à activation.
  • Liez chaque onglet à son panneau correspondant via l’attribut aria-controls.
  • Pour améliorer la visibilité en cas de zoom important, utilisez des largeurs en pourcentage pour les onglets et les panneaux afin de conserver une mise en page proportionnelle.
  • Des libellés explicites sont essentiels pour identifier le contenu masqué dans les onglets. Ils offrent des repères descriptifs pour les utilisateurs, en particulier ceux qui dépendent de technologies d’assistance comme les lecteurs d’écran, rendant l’expérience plus accessible et inclusive.
HTML
<button role="tab" aria-selected="false" id="tabbutton-2" tabindex="-1" aria-controls="tabpanel-2">Powerpoint</button>

Onglet actif

  • Distinguez l’onglet actif des onglets inactifs en lui appliquant une bordure plus épaisse et une couleur distincte.
  • Ce contraste visuel est particulièrement utile pour les personnes qui ne perçoivent pas bien les couleurs, car il les aide à identifier l’onglet actif.
  • La bordure renforcée améliore également la visibilité pour les utilisateurs qui recourent à un fort agrandissement, en les aidant à repérer l’onglet actif.
  • Comme l’onglet est créé à partir d’un élément bouton HTML, il n’est pas nécessaire d’ajouter tabindex="0" à l’onglet sélectionné (actif).
  • Les éléments <button> en HTML sont intrinsèquement accessibles au clavier et font naturellement partie de l’ordre de tabulation.
HTML
<button role="tab" aria-selected="true" id="tabbutton-1" aria-controls="tabpanel-1">PDF</button>

Panneau

  • Appliquez role="tabpanel" à l’élément contenant le contenu associé à un onglet pour indiquer qu’il s’agit du panneau correspondant dans la liste d’onglets. Cet attribut précise la fonction de l’élément dans la structure d’accessibilité.
  • Ajoutez aria-labelledby au panneau en utilisant l’ID de l’onglet correspondant. Cela crée un lien entre l’onglet et son contenu, améliorant l’accessibilité et la compréhension du panneau.
  • Attribuez un ID unique au panneau, qui sera utilisé dans aria-controls du bouton d’onglet correspondant.
  • Pour le panneau visible, ajoutez tabindex="0" afin de permettre l’accès au clavier.
HTML
<div role="tabpanel" aria-labelledby="tabbutton-1" id="tabpanel-1" tabindex="0">
    <p>Un PDF accessible est un document contenant des balises XML, des éléments qui peuvent être utilisés pour indiquer un titre, une image, un tableau, une liste à puces, un graphique, etc.</p>
</div>

Sur cette page

Keyboard navigation function table
Touche Fonction
Tab
  • Lorsque le focus entre dans la liste d’onglets, il est placé sur l’onglet actif.
  • Lorsque le focus est sur la liste d’onglets, il passe à l’élément suivant dans l’ordre de tabulation. Il peut s’agir d’un élément situé dans le panneau visible ou du prochain élément focalisable juste après le panneau d’onglets.
Touche Entrée / Touche Espace Lorsque qu’un onglet a le focus, il est activé et son panneau associé est affiché.
Flèche droite Lorsque le focus est sur un onglet :
  • Le focus se déplace vers l’onglet suivant.
  • Si le focus est sur le dernier onglet, il revient au premier onglet.
Flèche gauche Lorsque le focus est sur un onglet :
  • Le focus se déplace vers l’onglet précédent.
  • Si le focus est sur le premier onglet, il passe au dernier onglet.
Touche Début (Home) Lorsque le focus est sur un onglet, il se déplace vers le premier onglet.
Touche Fin (End) Lorsque le focus est sur un onglet, il se déplace vers le premier onglet.

Aperçu

La démo en version mobile sera disponible prochainement. Dans l'attente, nous vous invitons à consulter la démo en version Desktop.