Nouveau Components

Fil d’Ariane

Un fil d’Ariane est une aide à la navigation utilisée dans les interfaces web qui fournit aux utilisateurs un chemin clair retraçant leur parcours sur un site. Il se présente généralement sous la forme d’une rangée horizontale de liens textuels, chaque lien étant séparé par des symboles, comme le signe supérieur (>), indiquant la hiérarchie du contenu.

Cette fonctionnalité est particulièrement utile sur les sites comportant plusieurs niveaux d’organisation du contenu : elle permet aux utilisateurs de savoir où ils se trouvent dans le site et de revenir facilement aux pages précédentes.
Les fils d’Ariane sont notamment précieux pour les personnes qui arrivent sur une page via des liens externes ou des résultats de recherche, car ils offrent un moyen rapide de comprendre le contexte de la page au sein de la structure globale du site.

Quand utiliser un fil d’Ariane

  • Navigation hiérarchique : Utiliser un fil d’Ariane pour permettre aux utilisateurs de retracer et parcourir la hiérarchie du site, généralement placé en haut de page.
  • Repérage contextuel : Mettre en place un fil d’Ariane pour indiquer clairement aux utilisateurs où ils se situent dans la structure du site.

Quand ne pas utiliser un fil d’Ariane

  • Navigation linéaire. Éviter le fil d’Ariane lorsque la séquence des pages prime sur la hiérarchie.
  • Sites à un seul niveau. Ne pas utiliser de fil d’Ariane lorsqu’il n’existe aucune hiérarchie à parcourir.

À faire

Rester simple et intuitif. Afficher un chemin clair de la page d’accueil vers la page courante, sans navigation complexe.

À ne pas faire

Ne pas complexifier. Éviter d’utiliser un fil d’Ariane pour des structures de navigation non hiérarchiques ou trop complexes. Il ne doit jamais remplacer la navigation principale.

Modes d'action

  • Interaction à la souris : Les liens du fil d’Ariane doivent réagir visuellement à l’interaction avec la souris, indiquant qu’ils sont cliquables, généralement par un changement de couleur ou un soulignement.
  • Navigation au clavier : Le fil d’Ariane doit être accessible au clavier, permettant aux utilisateurs de naviguer avec la touche Tab et de sélectionner avec la touche Entrée.
  • Accessibilité pour les lecteurs d’écran : Structurez correctement les éléments du fil d’Ariane avec des libellés clairs, en utilisant des repères ARIA ou d’autres attributs pour indiquer le chemin de navigation aux lecteurs d’écran.

Contenu

  • Libellés concis : Gardez les libellés du fil d’Ariane courts et précis, en évitant les mots inutiles pour maintenir la clarté.
  • Refléter la hiérarchie : Les libellés doivent refléter fidèlement la hiérarchie du site, montrant la relation entre les pages parentes et les pages enfants.
  • Séparateurs clairs : Utilisez des séparateurs visuels distincts (comme le symbole « > ») pour indiquer la progression d’un niveau à l’autre.
  • Éviter la troncation : Assurez-vous que les libellés du fil d’Ariane ne soient pas tronqués ; ils doivent être entièrement visibles afin d’éviter toute confusion sur la position de la page dans la hiérarchie.

Sur cette page

Mots-clés

Fil d’Ariane : Un fil d’Ariane est un chemin de navigation indiquant le parcours de l’utilisateur à l’intérieur de la structure d’un site web.

Étiquetage et zones

Hiérarchie structurée

  • Les fils d’Ariane sont présentés sous la forme d’une liste ordonnée à l’aide des balises <ol> et <li>, afin de représenter une hiérarchie structurée.

Repère de navigation

  • Le fil d’Ariane est contenu dans un élément <nav> avec un intitulé « Vous êtes ici : » qui va servir de repère de navigation pour faciliter le repérage de l’utilisateur. À défaut, l’attribut role="navigation" peut être utilisé pour indiquer sa fonction de navigation.

Étiquetage ARIA

  • L’attribut aria-label="Vous êtes ici :" est ajouté à la balise <nav> afin de décrire explicitement la fonction du composant :
HTML
<nav aria-label="Vous êtes ici :" class="breadcrumb">

Séparateurs visuels

  • Les séparateurs visuels entre les liens du fil d’Ariane sont ajoutés via CSS afin d’éviter qu’ils ne soient lus par les lecteurs d’écran.
  • L’élément graphique peut être inséré dans une balise <span> portant l’attribut aria-hidden="true", ce qui le masque aux technologies d’assistance tout en le conservant visible à l’écran.

Indicateur de page courante

  • L’attribut aria-current="page" est appliqué au dernier élément du fil d’Ariane pour indiquer la page actuelle.

Balisage du fil d’Ariane terminal

  • Le dernier élément de la séquence du fil d’Ariane est balisé à l’aide d’une balise <a> ou <span>, selon qu’il s’agisse ou non d’un lien cliquable.

Lecteur d’écran

Les lecteurs d’écran identifient le fil d’Ariane comme un repère de navigation grâce à l’élément <nav> portant l’attribut aria-label="Vous êtes ici :". La structure, présentée sous forme de liste ordonnée <ol> contenant des éléments <li>, permet au lecteur d’écran de transmettre clairement l’ordre et la hiérarchie des pages.
Chaque lien du fil d’Ariane est annoncé, offrant des options de navigation claires, tandis que l’attribut aria-current="page" appliqué au dernier élément indique distinctement la page actuelle. De plus, les séparateurs visuels créés via CSS ne sont pas lus par les lecteurs d’écran, garantissant une expérience auditive fluide sans informations redondantes.

Sur cette page

keyboard navigation function table
Touche Fonction
Entrée/Espace Exécute le lien et déplace le focus vers la cible du lien.
Tab Quand l’élément n’a pas le focus, le focus se déplace vers le lien.
Shift + F10 Ouvre un menu contextuel pour le lien.

Aperçu

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