Fil d’Ariane et accessibilité

Publié le 5 novembre 2012 par Équipe Atalan

Le fil d’Ariane est un système de navigation permettant à l’utilisateur de se situer sur un site Internet.

Il indique la position courante de l’internaute dans l’arborescence du site par rapport à la page d’accueil.

Selon les WCAG 2.0 (référentiel d’accessibilité du W3C), la présence du fil d’Ariane répond à un critère d’accessibilité de niveau AAA (le plus élevé).

Les exigences en terme d’accessibilité

Composition

Le fil d’Ariane doit refléter l’architecture du site et doit permettre à l’internaute de se repérer dans l’arborescence de ce dernier.

Dans l’ordre, il doit être composé :

D’un lien menant à la racine du site (page d’accueil).
De la totalité des liens vers les pages séparant la racine du site de la page courante.
Du titre de la page courante.

À noter que ce dernier élément ne doit pas être cliquable.

Élément séparateur

Bien que non obligatoire, il est conseillé de séparer les éléments composant le fil d’Ariane avec un caractère visible (directement intégré dans le code HTML) tel que « > » par exemple.

L’intérêt pour l’accessibilité y est exposé plus bas, dans la partie « Structure HTML > Paragraphe ».

Vous êtes ici

Le fil d’Ariane est régulièrement précédé d’une mention du type « Vous êtes dans : » ou « Vous êtes ici : ».

Bien que cette mention ne soit pas exigée en terme d’accessibilité, elle permet à l’utilisateur d’identifier rapidement ce moyen de navigation et de comprendre sa fonction. Nous recommandons par conséquent l’intégration de cette mention.

Emplacement visuel et dans le code

Le fil d’Ariane doit être intégré, visuellement et dans le code source, au même emplacement sur l’ensemble des pages du site ; hormis sur la page d’accueil où sa présence n’est pas obligatoire.

À noter qu’en matière d’accessibilité, aucune exigence n’est formulée quant à son emplacement visuel au sein de la page. Il peut par conséquent être placé n’importe où (tout en haut, tout en bas ou en colonne de droite par exemple).

Toutefois, logiquement, en terme d’ergonomie cette fois, il est recommandé de le placer juste au dessus du contenu principal de la page.

Structure HTML

Les référentiels d’accessibilité ne demandent aucun balisage particulier pour structurer un fil d’Ariane. Malgré tout, selon nous, seules 2 solutions sont à retenir :

Liste non-ordonnée (balises `<ul>` et `<li>`)

Il est possible de le structurer en utilisant une liste non-ordonnée comme par exemple :

<div id="fil-ariane">
   <p>Vous êtes dans :</p>
   <ul>
      <li><a href="#">Accueil</a> ></li>
      <li><a href="#">Accessibilité</a> ></li>
      <li><strong>Fil d'Ariane</strong></li>
   </ul>
</div>

Nous voyons plusieurs avantages à l’utilisation d’une liste dans ce cas.

Par exemple, le nombre d’éléments le composant peut être restitué aux utilisateurs de lecteurs d’écran, ce qui leur permet de savoir à quel niveau de profondeur ils se situent dans l’arborescence.

En revanche, nous ne sommes pas favorables à l’imbrication de listes pour baliser un fil d’Ariane. Car dans ce cas, la restitution par un lecteur d’écran peut devenir rapidement « verbeuse » et par conséquent désagréable à l’écoute.

Paragraphe (balise `<p>`)

Un fil d’Ariane peut très bien tout simplement se coder avec la balise <p> tel que :

<p id="fil-ariane">
   Vous êtes dans :
   <a href="#">Accueil</a> >
   <a href="#">Accessibilité</a> >
   <strong>Fil d'Ariane</strong>
</p>

Cette structure, bien que « sémantiquement pauvre », convient tout à fait en terme d’accessibilité : les « > » séparateurs induisant la notion de progression dans l’arborescence.

Vous remarquerez d’ailleurs que nous avons opté pour ce balisage sur ce blog.

HTML5

Si vous concevez vos sites en HTML5, il peut être intéressant d’englober le fil d’Ariane avec une balise <nav> comme par exemple :

<nav id="fil-ariane">
   Vous êtes dans :
   <a href="#">Accueil</a> >
   <a href="#">Accessibilité</a> >
   <strong>Fil d'Ariane</strong>
</nav>

Bien que l’intérêt en terme d’accessibilité est à ce jour inexistant, demain, lorsque cette balise sera supportée par les différents navigateurs et lecteurs d’écran du marché, cela pourra potentiellement être intéressant.

Ajout du 19 novembre 2012

À noter que le lecteur d’écran NVDA (version 2012.3) reconnaît la balise <nav>. Lorsqu’il la rencontre, il annonce « repère – navigation » à l’utilisateur.

Ressources

Que dit AcceDe Web ?

La notice pour la conception graphique du projet AcceDe Web inclut une recommandation intitulée : Prévoir un fil d’Ariane (externe) .
Vous y retrouverez, en condensé et illustrées, les recommandations d’accessibilité d’ordre graphique proposées dans ce billet.

Vos commentaires

Par Stéphane RITSCH, le 23 décembre 2019 à 22:33.

Le lien https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
semble indiquer que dorénavant le dernier lien du breadcrumb doit être présent.

Répondre
Par Julie, le 26 février 2016 à 14:39.

Bonjour,
Dans certains cas, il arrive qu’on veuille regrouper des pages dans une catégorie mais que cette catégorie n’ait pas de page dédiée (dans un menu par exemple).
Est-ce qu’en terme d’accessibilité un fil d’ariane avec un élément sans lien est admis ? Cela permet de situer la page par rapport au menu malgré tout donc ça ne me semble pas inutile. Qu’en pensez-vous ?

Répondre
- Par Johan Ramon, le 29 février 2016 à 12:20.
  
  Bonjour Julie,
  
  Merci pour ton commentaire.
  
  D’après la technique WCAG G65: Providing a breadcrumb trail, tous les éléments du fil d’Ariane (sauf celui de la page courante) doivent être des liens.
  
  Toutefois, d’après nous, si cela n’est pas envisageable (contraintes techniques ou liées à l’arborescence, par exemple), ce n’est pas critique/bloquant.
  
  Une grande partie de l’objectif du fil d’Ariane étant quand même atteint : l’utilisateur est en mesure de se repérer dans le site.
  
  À noter que la présence et la pertinence d’un fil d’Ariane est un critère de niveau AAA d’accessibilité.
  
  Johan
  
  Répondre
Par Gaël Poupard, le 7 juillet 2015 à 09:14.

En complément, une vue intéressante est proposée par Google, qui préfère les listes : https://developers.google.com/structured-data/breadcrumbs

Ceci dit ça ressemble beaucoup plus à un besoin de balises pour poser les métadonnées, puisque leur HTML est invalide : les séparateurs se promènent entre les <li> !!

Répondre
Par Claire Bizingre, le 6 juin 2015 à 10:03.

Bonjour,

Gaël Poupard a proposé une écriture du fil d’Ariane que je trouve intéressante, lors de son atelier à WP Tech 2014 :
```
<nav role="navigation" aria-label="Vous êtes ici">
  <a href="http://2014.wptech.fr">WordPressTech 2014</a>
  <span aria-hidden="true">→</span>
  <strong>Les thèmes enfants : au-delà de la bonne pratique</strong>
</nav>
```
Personnellement, je remplacerais bien « Vous êtes ici : » par « Fil d’Ariane » et je me demandais s’il est en fin de compte opportun de ne pas vocaliser le > et d’utiliser la technique d’un caractère non vocalisé. Les utilisateurs sont peut-être habitués à entendre le > .

Qu’en pensez-vous ?

Répondre
- Par Sébastien Delorme, le 9 juin 2015 à 17:50.
  
  Bonjour Claire,
  
  Ouch, notre article date un peu ! J’aime bien la proposition.
  
  nav role="navigation" correspond à ce que nous proposions pour HTML5. Chez Atalan, il y a encore quelques débats sur l’utilité ou non d’ajouter role="navigation" sur une <nav>. Mais nous y reviendrons probablement dans la prochaine version d’AcceDe Web.
  
  Je suis plus perplexe sur le fait de ne pas faire lire le séparateur. Effectivement les utilisateurs peuvent être habitués, mais surtout sans ce séparateur quelle différence avec une simple suite de lien ?
  Certes, nous savons que nous sommes dans le fil d’Ariane grâce à l’aria-label (je me réponds à moi-même ^^). J’avoue donc hésiter un peu pour le coup.
  
  Enfin, sur le contenu d’aria-label, effectivement nous commençons de notre côté à le demander sur des navigations (pour signaler les menus principaux, secondaires, etc.). Par conséquent, c’est clairement intéressant de le prévoir. Personnellement, je préfère « Vous êtes ici : » à « Fil d’Ariane : », un fil d’Ariane étant probablement pour la majorité des utilisateurs soit un légendaire objet de la mythologie grecque, soit pas grand chose en fait ;)
  
  Bien à toi,
  Sébastien.
  
  Répondre
  - Par Claire Bizingre, le 9 juin 2015 à 18:09.
    
    J’utilise de plus en plus aria-label sur les différents menus de navigation.
    
    Et c’est marrant, cette possible interprétation du fil d’Ariane !
    
    C’est pas faux car j’ai rencontré récemment un personne qui l’avait sur son site, mal placé d’ailleurs et qui ne savait que c’était un fil d’Ariane.
    
    Merci pour ce retour.
  - Par Gaël Poupard, le 6 juillet 2015 à 14:47.
    
    Je fais drôlement bien de repasser sur cet article car je découvre un bon retour sur ma proposition :D
    
    Merci Claire et Sébastien ;-)
Par Tony, le 5 mars 2014 à 13:26.

Merci pour votre article. Mais ne pensez-vous pas qu’il serait judicieux d’ajouter du texte caché par CSS, pour que les utilisateurs de lecteurs d’écran puissent avoir des informations plus précise. Par exemple faire précédé chaque mot par « fil d’Ariane » (caché en CSS). De cette manière les utilisateurs de lecteurs d’écran pourrait avoir une liste de liens comme ceci :
[liens précédents]
– fil d’ariane : accueil
– fil d’ariane : Accessibilité
– fil d’ariane : fil d’Ariane
[liens suivants]

Répondre
- Par Johan Ramon, le 12 mars 2014 à 12:02.
  
  Bonjour Tony,
  
  Merci pour votre commentaire et votre suggestion.
  
  Toutefois, nous ne sommes pas trop favorable à cette dernière.
  Notamment car l’ajout du terme « fil d’Ariane » (masqué) devant chaque élément le composant entrainerait une restitution très « lourde »/verbeuse pour les personnes non ou malvoyantes naviguant avec un lecteur d’écran.
  
  À la rigueur, si non-affichée à l’écran par défaut, une mention masquée du type « Vous êtes dans : » pourrait être ajoutée au début du fil d’Ariane.
  
  Répondre
Par Carsten, le 7 novembre 2012 à 18:55.

Merci pour cet article super clair et très utile tout comme l’excellent travail de notices sur AcceDe Web.

La solution la plus simple avec le paragraphe semble être le choix le plus agréable à l’écoute. C’est l’occasion de remettre en question l’usage courant de la liste dans ce cas.

Répondre
Par tetue, le 6 novembre 2012 à 11:32.

Merci pour cet article précis et très clair sur l’accessibilité du fil d’Ariane !

D’un point de vue *structurel*, plusieurs choses me gênent dans l’utilisation d’un balisage en liste ul li :

– l’insertion des séparateurs (« > ») dans l’item li lui-même !
– la complexité (relative, certes) du balisage ;
– le rendu par défaut, insatisfaisant, qui nécessite un coup de peinture CSS pour aligner les items à l’horizontale…

Dans un souci de *maintenablité* (code distribué ou/et travail d’équipe avec juniors et novices) le balisage en p est préférable : plus simple, immédiatement correct et satisfaisant sans style.

Le seul apport d’une structure ul li, pour l’accessibilité, semble être l’énoncé préalable du nombre d’items, qui donne une idée de la profondeur dans l’arborescence : est-ce fortement utile ou juste mélioratif ?

Répondre
- Par tanguy, le 6 novembre 2012 à 13:32.
  
  Pour ma part, je trouve qu’une structure en p est largement suffisante. D’autant que chaque lien est généralement énoncé séparément par les lecteurs d’écran.
  
  Répondre
- Par goetsu, le 11 novembre 2012 à 00:51.
  
  oui je partage l’avis de tetue la structure proposée à base de ul li non imbriquée ne me parait pas idéal. Du point de vue sémantique il ne s’agit pas de X items de même niveau mais bien d’une hiérarchie. Je suis néanmoins d’accord qu’une hiérarchie de X listes mono item n’a que peu de sens. Bref, je vote pour la structure à base de <p> aussi.
  
  Répondre
Par Victor Brito, le 5 novembre 2012 à 18:42.

Pour que les bouts de code présentés soient valides, il faut coder le chevron selon son entité HTML, comme suit : >.

Répondre
- Par Uxlco, le 6 novembre 2012 à 12:27.
  
  @victor Pas sûr que les > ne soient pas vocalisés.
  
  Répondre
  - Par tetue, le 6 novembre 2012 à 15:25.
    
    Sur le choix du caractère typographique, relire ce pointilleux billet : Fil d’Ariane et sémantique (à nouveau)
Par RodLeg, le 5 novembre 2012 à 17:57.

Merci pour cet article très détaillé et fort intéressant.

Répondre