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.

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.

Vous pouvez changer le caractère de séparation dans les styles du module avec la variable $breadcrumb-symbol. Sa valeur par defaut est ">".

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