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

• Élement HTML nav
  • Le processus par étape sera balisé avec les balises <nav>...</nav> ; l’attribut role="navigation est optionnel.
  • L’attribut aria-label est ajouté à l’élément nav avec une valeur unique. Exemple : <nav role="navigation" aria-label="Vous êtes ici : ">.
• Liste ordonnée et liens
  • 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"  :
    • de préférence sans lien posé sur l’item ;
    • sinon, si le lien est conservé, il pourra alors être inactivé en CSS (pointer-events: none; cursor: default;).

<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>