Composant · Menus et navigation

Fil d'Ariane accessible : RGAA, aria-current et BreadcrumbList

Construire un fil d'Ariane (breadcrumb) accessible : nav nommé, liste ordonnée, aria-current sur la page courante, séparateurs muets et données structurées BreadcrumbList.

Le fil d'Ariane (breadcrumb) est une piste de liens vers les pages parentes de la page courante, dans l'ordre hiérarchique. Il répond à une question que chaque visiteur se pose un jour : « où suis-je dans ce site ? ». Au sens du glossaire RGAA, le fil d'Ariane est une barre de navigation à part entière, ce qui emporte des obligations précises de structure et de constance.

La structure de référence tient en deux éléments natifs : une balise <nav> nommée et une liste ordonnée <ol>. Aucun rôle ARIA exotique, aucun script. C'est l'un des motifs les plus simples à réussir, et pourtant l'un des plus souvent abîmés par des détails : séparateurs annoncés par le lecteur d'écran, liste non ordonnée, page courante jamais marquée par aria-current="page".

Quand ce motif est le mauvais choix

Les étapes d'un processus (paiement, inscription, formulaire en plusieurs écrans) : un indicateur d'étapes est un autre motif, avec sa propre sémantique. Un fil d'Ariane y sèmerait la confusion entre « où je suis dans le site » et « où j'en suis dans ma démarche ».
L'historique de navigation : le fil d'Ariane montre la position dans l'arborescence du site, pas le chemin réellement parcouru par l'utilisateur. Reproduire l'historique produirait un fil différent pour chaque visiteur, donc inutilisable comme repère.
Un site plat : sans hiérarchie de rubriques, un fil d'Ariane n'apporte rien ; la navigation principale suffit.
Explorer ou manipuler la hiérarchie complète (déplier, replier, sélectionner) : ce besoin relève d'un autre composant, décrit dans la fiche arborescence (tree view).

Critères RGAA applicables

Critère 9.2 : structure cohérente du document. Le fil d'Ariane est une zone de navigation secondaire ; le test 9.2.1 attend que ces zones soient structurées au moyen d'une balise <nav>.
Critère 9.3 : listes correctement structurées. L'ordre des maillons est précisément l'information que porte un fil d'Ariane ; le test 9.3.2 demande qu'une liste ordonnée utilise <ol> et <li>, pour que le lecteur d'écran annonce le nombre d'éléments et la position de chacun.
Critère 6.1 : liens explicites. L'intitulé de chaque maillon, seul ou avec son contexte, doit permettre d'en comprendre la fonction et la destination.
Critère 6.2 : intitulé de lien. Chaque lien du fil d'Ariane doit avoir un intitulé entre <a> et </a> ; un maillon réduit à une icône sans texte n'a pas d'intitulé.
Critère 12.2 : barres de navigation à la même place. Le glossaire RGAA cite explicitement le fil d'Ariane parmi les barres de navigation : il doit rester à la même place dans la présentation et conserver le même ordre relatif dans le code source sur tout l'ensemble de pages.

Interaction clavier attendue

Le fil d'Ariane est un motif entièrement statique, composé de liens natifs. Aucun script n'est nécessaire, et c'est un signal utile : un fil d'Ariane qui exige du JavaScript pour fonctionner est presque toujours suréquipé.

Touche	Action
Tab / Maj + Tab	Parcourt les maillons, dans l'ordre du document
Entrée	Active le lien focalisé

Rôles et attributs ARIA

Trois décisions font tout le motif : un landmark navigation nommé, une liste ordonnée, et le marquage de la page courante.

<nav aria-label="Fil d'Ariane">
  <!-- <ol>, pas <ul> : la séquence est porteuse de sens. Le lecteur d'écran
       annonce « liste, 4 éléments » puis la position de chaque maillon. -->
  <ol class="fil-ariane">
    <li><a href="/">Accueil</a></li>
    <li><a href="/produits">Produits</a></li>
    <li><a href="/produits/claviers">Claviers</a></li>
    <!-- Dernier maillon : la page courante, marquée par aria-current="page".
         Un simple texte est le choix le plus honnête : on n'offre pas un lien
         vers la page où l'on se trouve déjà. -->
    <li><span aria-current="page">Clavier ergonomique</span></li>
  </ol>
</nav>

/* Le séparateur est du contenu généré : il n'existe pas dans l'arbre
   d'accessibilité, donc il n'est jamais annoncé. C'est la raison pour
   laquelle il appartient au CSS et non au balisage. */
.fil-ariane li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
}

/* La page courante ne doit pas être signalée par la seule couleur. */
.fil-ariane [aria-current="page"] {
  font-weight: 700;
}

Points de vigilance sur le nommage et l'état :

aria-label="Fil d'Ariane" sans le mot « navigation » : le rôle de la balise <nav> est déjà annoncé. « Fil d'Ariane, navigation » est correct ; « Navigation fil d'Ariane, navigation » est une répétition.
aria-current="page" s'emploie une seule fois par page. Si le design exige que le dernier maillon reste visuellement un lien, conservez un <a> et posez aria-current="page" dessus : les deux variantes sont valides.
La valeur page est le jeton précis pour ce cas ; aria-current="true" est valide mais moins bien restitué.
Si le séparateur est une image (chevron.svg), elle doit être ignorée des technologies d'assistance (alt="" ou aria-hidden="true"), sans quoi son nom de fichier est annoncé entre chaque lien.

Données structurées BreadcrumbList

Le balisage Schema.org BreadcrumbList permet aux moteurs de recherche d'afficher le chemin hiérarchique dans les résultats. Il se déclare en JSON-LD, indépendamment du HTML :

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Accueil", "item": "https://exemple.fr/" },
    { "@type": "ListItem", "position": 2, "name": "Produits", "item": "https://exemple.fr/produits" },
    { "@type": "ListItem", "position": 3, "name": "Claviers", "item": "https://exemple.fr/produits/claviers" },
    { "@type": "ListItem", "position": 4, "name": "Clavier ergonomique" }
  ]
}
</script>

Le dernier élément peut omettre la propriété item : c'est la page courante. Attention à ne pas confondre les deux couches : BreadcrumbList sert le référencement, pas l'accessibilité. Les technologies d'assistance n'exploitent pas les données structurées ; elles lisent le HTML. Un fil d'Ariane en <div> accompagné d'un JSON-LD impeccable reste inaccessible.

Défauts fréquents et impact utilisateur

Séparateurs littéraux dans le balisage (/ ou > entre les <li>) : le lecteur d'écran annonce « slash » ou « supérieur à » entre chaque maillon. Sur un fil d'Ariane à cinq niveaux, cinq mots parasites à chaque lecture.
Image de séparation sans attribut alt : annoncée par son nom de fichier (« chevron point svg ») entre chaque lien.
<ul> au lieu de <ol> : l'ordre est précisément l'information que porte un fil d'Ariane ; une liste non ordonnée la perd.
<nav> sans nom accessible : dans la liste des landmarks, le fil d'Ariane est annoncé « navigation », indiscernable de la navigation principale. L'utilisateur qui navigue de landmark en landmark ne sait pas lequel choisir.
aria-current="page" posé sur plusieurs maillons : l'attribut signifie « la page courante » ; multiplié, il ne désigne plus rien et l'utilisateur ne sait plus où il est.
Suite de <div> et <span> sans sémantique de liste : plus d'annonce « liste, 4 éléments », plus de position ; juste des liens en vrac dont la relation hiérarchique disparaît.

Ce que les outils automatiques ne détectent pas

Un scanner automatique, le nôtre compris, repère un <nav> sans nom accessible et une valeur d'aria-current invalide. Le reste relève du jugement ou de l'écoute :

les séparateurs littéraux annoncés « slash », le choix de <ul> au lieu de <ol> et l'absence d'aria-current sur le maillon courant se constatent au lecteur d'écran, pas dans un rapport ;
la pertinence des intitulés de maillons (critère 6.1) est un jugement humain : un outil vérifie qu'un intitulé existe, pas qu'il décrit la destination ;
la constance de position du fil d'Ariane d'une page à l'autre (critère 12.2) se vérifie en comparant plusieurs pages de l'ensemble, pas une page isolée.

Vérifier ce composant

Protocole manuel, trois minutes :

Au lecteur d'écran : la zone doit être annoncée « Fil d'Ariane, navigation, liste, 4 éléments », puis « Accueil, lien, 1 sur 4 ». Si vous entendez « slash » entre les maillons, les séparateurs sont dans le balisage. Si aucun nombre d'éléments n'est annoncé, ce n'est pas une liste.
Dans la liste des landmarks : le fil d'Ariane doit apparaître comme une entrée nommée, distincte de la navigation principale.
Dans la console : document.querySelectorAll('[aria-current]').length doit renvoyer 1 pour toute la page.

Deux outils gratuits du site pour aller plus vite :

le générateur de fil d'Ariane accessible produit le balisage <nav> + <ol> complet, avec aria-label, aria-current et les données structurées Schema.org ;
le simulateur de lecteur d'écran montre l'arbre d'accessibilité de votre page : vous y verrez immédiatement si la liste, son nom et la position des maillons sont restitués.

Approfondir avec les fiches critères

Vérifier ce composant sur votre site ?

Le scan repère les défauts détectables automatiquement (rôles incohérents, champs sans étiquette, attributs ARIA orphelins) ; le reste se vérifie à la main avec les protocoles de cette fiche.

Lancer un scan gratuit

Toutes les fiches composants accessibles