Fil d'Ariane

Dans le monde du web, le fil d'Ariane désigne un système d'aide à la navigation qui décrit l'arborescence des menus parcourus.

Qu’est-ce qu’un fil d’Ariane ?

Le terme “fil d’Ariane” provient du mythe de l’antiquité racontant comment Ariane tendit à son aimé Thésée un fil pour qu’il puisse retrouver son chemin après avoir pénétré le labyrinthe dans lequel était enfermé le Minautore.

Dans le monde du web, le fil d’Ariane désigne un système d’aide à la navigation qui décrit l’arborescence des menus parcourus pour afficher la page sur laquelle l’internaute se trouve.

Règles d’implémentation d’un fil d’Ariane

• Pas de fil d’Ariane sur la page d’accueil 
• Le fil d’Ariane doit toujours être situé au même endroit quelque soit la page affichée 
• Le fil d’Ariane doit précéder le contenu de la page 
• Le fil d’Ariane doit proposer des liens cliquables permettant de remonter dans l’arborescence du site 
• Idéalement, le dernier item du fil d’Ariane n’est pas cliquable et doit se différencier visuellement des autres items.

Règles d’accessibilité du fil d’Ariane

• Le fil d’Ariane est implémenté à l’intérieur de l’élément HTML sémantique nav portant le role="navigation"
  On pourra rajouter un attribut aria-label pour préciser qu’il s’agit d’un fil d’ariane.

<nav role="navigation" aria-label="Vous êtes ici">[…]</nav>

• Les différents items du fil d’Ariane seront proposés sous forme de liste ordonnée ol (puisque l’ordre des items a de l’importance).
• La position courante (page sur laquelle l’internaute se trouve) sera identifée par l’attribut aria-current="page"  sans lien posé sur l’item.

<nav role="navigation" aria-label="Vous êtes ici">
  <ol>
      <li><a href="/">Accueil</a></li>
      <li><a href="/Blog/">Blog</a></li>
      <li aria-current="page">Fil d'Ariane</li>
   </ol>
</nav>