Fil d'Ariane

Composant de navigation secondaire indiquant la position de l'utilisateur dans l'arborescence du site.

1. Démonstration

2. Accessibilité (Les fondations sémantiques)

Ce composant ne nécessite aucun JavaScript. Son accessibilité repose sur 4 points clés en HTML natif et CSS moderne :

Élément HTML / CSS	Explication
`<nav aria-label="...">`	La balise `<nav>` indique une zone de navigation. L'`aria-label` permet aux lecteurs d'écran de différencier ce menu de la navigation principale.
`<ol>` et `<li>`	La liste ordonnée indique vocalement combien de niveaux hiérarchiques composent ce chemin (ex: « Liste de 3 éléments »).
`aria-current="page"`	Indique aux technologies d'assistance que ce lien représente la page actuellement affichée.
Séparateurs silencieux	L'utilisation de la syntaxe CSS `content: "›" / ""` permet d'afficher le séparateur visuellement tout en le rendant totalement muet pour les lecteurs d'écran (texte alternatif vide), évitant la pollution vocale ("supérieur à").

3. Code source

HTML

Assurez-vous de toujours placer l'attribut aria-current="page" sur le tout dernier élément de la liste.

<nav aria-label="Fil d'Ariane" class="breadcrumb">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/boutique/">Boutique</a></li>
    <li><span aria-current="page">Chaussures</span></li>
  </ol>
</nav>