Breadcrumb

À quoi il sert

Breadcrumb indique l’emplacement de la page, de la racine à la page courante, sous forme de liens.

Quand l’utiliser

• Montrer le chemin d’une page profonde dans l’arborescence du site.
• Offrir un retour d’un niveau sans passer par le menu principal.

Quand ne pas l’utiliser

• Pour la navigation principale : le composant ne gère ni sous-menu ni liste déroulante.
• Préférence : pour une page de premier niveau, un titre suffit.

Exemples

<Breadcrumb
  label="Fil d’Ariane"
  items={[
    { href: '/', label: 'Accueil' },
    { href: '/components/', label: 'Composants' },
    { label: 'Breadcrumb' },
  ]}
/>

Accessibilité

Clavier

• Chaque lien intermédiaire est un élément a natif : Tab l’atteint, Entrée l’active.
• La page courante est un span : elle ne prend pas le focus.
• Le focus visible est un contour de couleur --pp-color-focus sur chaque lien.

Lecteur d’écran

• Le repère est annoncé par son nom, la valeur de label.
• La liste est annoncée comme liste : role="list" est posé explicitement.
• La page courante porte aria-current="page", que les lecteurs d’écran annoncent.
• Les séparateurs sont générés en CSS avec un texte vide : ils ne sont pas lus.

Garanti par le composant

• Repère nav nommé par label, liste ol avec role="list".
• Le dernier élément est rendu sans lien, avec aria-current="page".
• Liens soulignés, page courante en graisse : l’information ne repose pas sur la couleur.
• Aucun JavaScript.

À la charge de l’intégrateur

• Fournir un label dans la langue du site, par exemple « Fil d’Ariane ».
• Donner un href à chaque étape intermédiaire ; un élément sans href reste du texte.
• Vérifier que chaque href mène à la page que son libellé annonce.

Propriétés

Jetons utilisés

• --pp-color-accent
• --pp-color-fg
• --pp-color-focus
• --pp-color-muted
• --pp-font-size-0
• --pp-font-weight-medium
• --pp-size-rule
• --pp-size-target-min
• --pp-space-xs

Preuves et décisions

• WCAG 1.3.1 Information et relations
• WCAG 1.4.1 Utilisation de la couleur
• WCAG 2.4.7 Visibilité du focus
• Modèle APG « Breadcrumb », W3C WAI-ARIA
• Tests : packages/astro/test/Breadcrumb.test.ts