Breadcrumb

Présentation

Le breadcrumb (ou fil d’ariane) est un critère RGAA niveau AAA obligatoire au regard de la Checklist Pidila.

On l’affiche au-dessus du contenu principal. Idéalement on le place en premier élément du main ; ainsi lorsque l’utilisateur utilisera le lien d’accès rapide vers le contenu cet élément sera lu en premier.

Utilisation

Les styles sont portés par la class breadcrumb.

Accessibilité

Un attributs aria-label et un role navigation sur l’élément permettent aux utilisateurs pilotant une aide technique d’être informés de la nature de cet élément.

Les éléments graphiques symbolisant l’arborescence (>, /, ->, etc.) sont insérés soit directement dans la source dans des spans dotés de l’attribut aria-hidden="true", soit placés en css grâce aux pseudo-éléments. Scampi combine ces deux méthodes.

Configuration

La variable proposée dans ce module est :

  • $breadcrumb-symbol : caractère de séparation, sa valeur par défaut est \203A (soit le caractère ">");

Utilisation

<nav class="breadcrumb" role="navigation" aria-label="Vous êtes ici : ">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><span aria-hidden="true"></span><a href="/">Accueil</a></li>
    <li class="breadcrumb-item"><span aria-hidden="true"></span><a href="#">Rubrique</a></li>
    <li class="breadcrumb-item"><span aria-hidden="true"></span><a href="#">Sous-rubrique</a></li>
    <li class="breadcrumb-item"><span aria-hidden="true"></span><strong aria-current="page">Titre de la page</strong></li>
  </ol>
</nav>

Démo