Fil d'ariane

Un fil d'ariane est un système de navigation qui fournit une aide visuelle pour indiquer à l'utilisateur où il se trouve dans la hiérarchie du site.

Règles d’implémentation pour l’accessibilité

  • Le fil d’Ariane est contenu dans un élément HTML nav possédant le rôle role="navigation.
  • La balise nav possède un attribut aria-label ou aria-labelledby.
  • L’ensemble des liens est structuré à l’aide d’une liste ordonnée.
  • Pour empêcher l’annonce par le lecteur d’écran des séparateurs visuels entre les liens, les séparateur sont ajoutés via CSS.
  • Si l’élément représentant la page en cours est un lien, le lien possède l’attribut aria-current="page" sinon l’attribut aria-current est facultatif.

Visuel

Extraits de code

Code HTML

<nav aria-label="Vous êtes ici" class="demo-ariane">
    <ol>
        <li><a href="/">Accueil</a></li>
        <li><a href="/chapitre">Chapitre</a></li>
        <li><a href="/chapitre/rubrique/">Rubrique</a></li>
        <li><a href="/chapitre/rubrique/page/" aria-current="page">Page en cours</a></li>
    </ol>
</nav>

Code CSS

:root {
    --ARIANE-background-color: #e3e3e3;
    --ARIANE-border-color: #d5d5d5;
    --ARIANE-link-color: #575757;
    --ARIANE-link-page-color: #333333;
    --ARIANE-separateur: ">";
}

nav.demo-ariane {
    padding: 0.8em 1em;
    border: 1px solid var(--ARIANE-border-color);
    border-radius: 4px;
    background: var(--ARIANE-background-color);
  }
  
  nav.demo-ariane ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
  }
  
  nav.demo-ariane li {
    display: inline;
  }
  
  nav.demo-ariane li a{
    color: var(--ARIANE-link-color);
  }
  nav.demo-ariane li + li::before {
    padding-right: .5rem;
    padding-left: .5rem;
    content: var(--ARIANE-separateur)
  }
  
  nav.demo-ariane [aria-current="page"] {
    color: var(--ARIANE-link-page-color);
    font-weight: 700;
    text-decoration: none;
    pointer-events: none;
  }