Accessia

Composant accessible · outil gratuit

Fil d'Ariane accessible (breadcrumb) : code vérifié et données structurées

Un fil d'Ariane accessible est une navigation secondaire : un <nav> nommé (« Fil d'Ariane »), qui contient une liste ordonnée de liens, la page courante marquée aria-current="page", et des séparateurs purement décoratifs qui ne sont pas lus. Le RGAA n'exige pas de fil d'Ariane, mais s'il existe, il suit ces règles.

Critères RGAA 4.1.2 : 9.2, 9.3, 6.2 · WCAG 2.2 : 1.3.1, 2.4.4 · mis à jour le .

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<nav class="ariane" aria-label="Fil d'Ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/produits">Produits</a></li>
    <li><a href="/produits/chaussures-de-course" aria-current="page">Chaussures de course</a></li>
  </ol>
</nav>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Accueil",
      "item": "https://www.exemple.fr/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Produits",
      "item": "https://www.exemple.fr/produits"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Chaussures de course",
      "item": "https://www.exemple.fr/produits/chaussures-de-course"
    }
  ]
}
</script>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

  • Personnes aveugles : sans nav nommée, le fil d'Ariane se confond avec le menu ; sans liste, elles ne savent pas combien de niveaux il compte.
  • Personnes ayant des troubles cognitifs : le fil d'Ariane leur montre où elles sont dans le site et comment remonter.
  • Personnes qui naviguent au clavier : il leur évite de repasser par le menu pour remonter d'un niveau.

Le comportement attendu

Au clavier

Touche ou momentCe qui doit se passer
TabParcourt les liens du fil d'Ariane, du niveau le plus haut à la page courante.

Avec un lecteur d'écran

  • La zone est annoncée « Fil d'Ariane, navigation », puis « liste de 3 éléments ».
  • Le dernier lien est annoncé « page actuelle » grâce à aria-current="page".
  • Des séparateurs écrits dans le texte seraient lus à chaque niveau (« barre oblique ») : ils sont dessinés en CSS.

Les erreurs les plus fréquentes

  • Un simple paragraphe de liens. « Accueil > Produits > Chaussures » dans un <p> : ni navigation, ni liste.
  • Des séparateurs lus. Des « / » ou « > » écrits dans le texte, annoncés entre chaque niveau.
  • Une navigation sans nom. Deux <nav> sans aria-label : le lecteur d'écran ne permet pas de les distinguer.
  • La page courante non signalée. Le dernier niveau ressemble aux autres, sans aria-current.

Tester soi-même

  1. Avec un lecteur d'écran, listez les repères : le fil d'Ariane doit apparaître comme une navigation nommée.
  2. Parcourez-le : le nombre de niveaux est annoncé, la page courante aussi, et aucun séparateur n'est lu.
  3. Vérifiez les données structurées avec l'outil de test des résultats enrichis de Google.

Ce qu'Accessia détecte dans un audit

Accessia relève les zones de la page, dont les navigations et leur nom, dans les preuves du rapport : la revue express par l'IA propose un verdict sur la structure (critère 9.2). Les listes mal formées sont signalées automatiquement (critère 9.3). Les séparateurs lus et la page courante se vérifient à la main, ou avec le test ci-dessus.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

Le RGAA impose-t-il un fil d'Ariane ?

Non. Le critère 12.1 demande deux systèmes de navigation parmi le menu, le plan du site et le moteur de recherche ; le fil d'Ariane n'en fait pas partie. S'il existe, il doit respecter les règles de structure (9.2, 9.3).

Le dernier niveau doit-il être un lien ?

Les deux se font. Un lien avec aria-current="page" reste cohérent avec les autres niveaux ; un simple texte avec aria-current fonctionne aussi.

Les données structurées aident-elles l'accessibilité ?

Non, elles servent aux moteurs de recherche (affichage du chemin dans les résultats). Elles ne remplacent pas le balisage accessible.

Ce code rend-il mon site conforme ?

Il rend ce fil d'Ariane conforme aux contrôles affichés. Il doit ensuite être cohérent d'une page à l'autre.

Autres composants accessibles