Construire un fil d’Ariane efficace

4 juin 2009, 18 mars 2011,
par Romy Têtue

Mots-clefs associés à cet article :

Quitte à proposer un fil d’Ariane pour mieux se repérer dans le site, autant qu’il soit accessible, cohérent et efficace !

Le fil d’Ariane, ou « breadcrumb trail » en anglais [1], est une aide à la navigation qui permet de mieux se repérer dans le site. Il n’est pas indispensable et vient compléter la navigation principale, mais quitte à le proposer, autant qu’il soit accessible [2], cohérent et efficace, non ?

Pour bien faire, il doit refléter l’architecture du site. Il est par conséquent indépendant du chemin emprunté par l’internaute, contrairement à ce que son nom indique. Le fil d’Ariane d’emplacement [3] est statique et montre où la page se situe dans la hiérarchie du site web. Pour valoir comme repère, il doit mentionner la racine du site et la page courante et reprendre les mêmes dénominations que les pages parcourues pour les relier. Enfin, il doit être présent sur toutes les pages du site, à l’exception de la page d’accueil.

Voyons maintenant comment le construire.

Une simple succession de liens suffit

Voici ce que l’on croise trop souvent en structure HTML de fil d’Ariane :

<ul>
   <li><a href="#">Accueil</a></li>
   <li><a href="#">Rubrique</a></li>
   <li><a href="#">Page</a></li>
</ul>

Comme si tout élément de navigation d’un site se devait d’être une liste ! Le fil d’Ariane n’est pas une énumération (ul li), mais un chemin, qui plus est hiérarchique. Une liste ordonnée (ol li) ne serait-elle pas plus adéquate ? Si vous vouliez vraiment avoir un balisage significatif, vous opteriez pour la création d’une série de listes imbriquées, car chaque nouvelle section est une partie de la section qui la précède : [4]

<ul>
   <li><a href="#">Accueil</a>
       <ul>
           <li><a href="#">Rubrique</a>
               <ul>
                   <li><a href="#">Page</a></li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

Mais il est inutile de se compliquer autant la vie puisqu’une simple succession de liens suffit à signifier le fil d’Ariane :

<a href="#">Accueil</a> &gt; <a href="#">Rubrique</a> &gt; Page

Vous êtes ici

La racine doit avoir un libellé clair, sans équivoque, comme « Home page » ou simplement « Accueil ». En dotant ce premier lien d’une class dédiée — par exemple .first (en évitant .home qui est souvent utilisée pour cibler la page d’accueil exclusivement) —, vous pourrez l’habiller différemment, si besoin est :

<a href="#" class="first">Accueil</a>

Pour que le fil d’Ariane soit perçu comme tel de celles et ceux qui naviguent sans voir, mieux vaut l’annoncer par un label explicatif, du type « Vous êtes ici », ce qui donnera par exemple :

Vous êtes ici : Accueil > Rubrique > ... > Page

Cette mention peut être portée par l’attribut alt d’un picto, ce qui permet de gagner de la place à un endroit où l’on en a rarement trop. Par exemple :

<img src="img/here.png" alt="Vous êtes ici :" class="here" />

Séparateur conventionnel

L’élément séparateur joue également un rôle important. Si « : » et « | » sont aussi utilisés, le plus explicite est le caractère « > » qui évoque bien la notion de hiérarchie. Voici l’entité HTML :

&gt;

La synthèse vocale lira « supérieur », ce qui donnera par exemple : Vous êtes ici deux points accueil supérieur rubrique supérieur page.

En l’encapsulant d’une class CSS dédiée, habituellement .sep, on se donne la possibilité d’intervenir depuis une feuille de style externe pour remplacer ce séparateur par un élément graphique.

<span class="sep"> &gt; </span>

Il peut être remplacé par n’importe quel séparateur ou babiole graphique, que ce soit du texte ou une image. Gardez à l’esprit que choisir un autre signe demandera des efforts supplémentaires de compréhension à l’internaute.

<img src="img/sep.gif" alt="&gt;" class="sep" />

Image ou simple caractère, le séparateur doit être présent dans la page, pour séparer physiquement les liens les uns des autres.

Exposer la page courante

Le titre de la page courante doit être mentionné et dans le fil d’Ariane. Cette redondance permet à l’internaute de bien se repérer :

Vous êtes ici : Accueil > Rubrique > ... > Page courante

La page courante doit être mentionnée, puisqu’il s’agit de dire où l’on est, mais non cliquable, c’est-à-dire sans lien : on ne lie pas une page sur elle-même, ça n’a pas de sens ! Elle doit être distinguée des autres items du chemin, pas seulement visuellement, par un sélecteur CSS dédié, mais surtout sémantiquement, par une balise marquant l’importance. Par exemple :

<strong class="on">Page courante</strong>

Et le conteneur ?

N’oublions pas le conteneur, qui peut être un div ou un simple p, souvent pourvu du sélecteur angloglotte .breadcrumb, avec ou sans « s » [5] :

<div class="breadcrumb">
<a href="#">Accueil</a> &gt; …
&gt; Page courante
</div>

Résumons

Accueil > Rubrique > Sous-rubrique > Page courante

Placez le fil d’Ariane en haut de page, de préférence à gauche, juste au dessus du contenu. De cette façon il ne gène pas la consultation du contenu et reste facilement accessible. Côté style, il doit rester discret pour ne pas interférer avec la navigation. Souvent dans un petit corps de police, il doit rester lisible sans gêner la lecture de la page.

Vos commentaires

  • Le 30 juillet 2012 à 13:19, par Omnireso En réponse à : Construire un fil d’Ariane efficace

    Le fil d’Ariane est souvent salvateur lorsqu’on tombe sur un site labyrinthique !

    Il apporte alors un avantage ergonomique majeur, d’autant plus si l’arborescence est structurée selon un arbre sémantique intelligible pour l’internaute (url dites « optimisées »).

    Merci pour ce beau récapitulatif en la matière !

  • Le 6 novembre 2012 à 01:52, par Loiseau2nuit En réponse à : Construire un fil d’Ariane efficace

    Depuis HTML 5, il m’a semblé logique, sémentiquement parlant, d’encapsuler mon fil d’ariane non plus dans une div ou un p mais directement dans un <nav>. Est-ce que cela te semble cohérent ?

    Par ailleurs, si l’on veut vraiment aller au bout du bout de la sémantique, il existe aussi un micro-formatage spécifique pour les breadcrumb. Rien de neuf côté graphisme, juste que désormais, les chemins de navigation et les liens vers les pages intermédiaires seraient désormais reconnus comme tels par les systèmes capables de les interpréter... les moteurs de recherches entre autre (ce qui explique que sur certaines recherches, l’on voit des résultats proposant un fil d’Ariane dès la page de résultats)

  • Le 6 novembre 2012 à 12:19, par Romy Têtue En réponse à : Construire un fil d’Ariane efficace

    Voici un article qui tombe à point, aujourd’hui sur le blog Atalan, pour te répondre et préciser les exigences en terme d’accessibilité : Fil d’Ariane et accessibilité.

    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>), mais pas arborée (trop verbeuse en synthèse vocale) ;
    • paragraphe (balise <p>), tout à fait convenable.

    D’un point de vue structurel, plusieurs choses me gênent dans l’utilisation d’un balisage en liste <ul> et <li> pour le fil d’Ariane :

    • l’insertion des séparateurs (« > ») dans l’item <li> lui-même !
    • la complexité (relative, certes) du balisage ;
    • le rendu graphique 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é, par exemple squelettes standards de SPIP, et/ou travail d’équipe avec juniors et novices) le balisage en <p> est préférable : plus simple, immédiatement correct et satisfaisant sans style. Ça marche à tout coup !

    Et puis, d’un point de vue sémantique : un chemin n’est pas une liste !

    Le seul apport d’une structure en <ul> et <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 ? 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épond Tanguy.

    Enfin, la balise <nav>, en HTML5, est appropriée mais pour l’instant sans effet.

  • Le 6 novembre 2012 à 15:11, par Loiseau2nuit En réponse à : Construire un fil d’Ariane efficace

    Thanks ! :-)
    Je vais creuser tout ça du coup (et par la même, découvrir cet Atalan dont j’entends parler pour la 2 ou 3ème fois en quelques jours, ca ne doit pas être un hasard ^^)

  • Le 6 mars 2014 à 18:30, par Romy Têtue En réponse à : Construire un fil d’Ariane efficace

    Pour mettre à jour cet article, voici le code que j’adopte en HTML5 :

    <nav class="navpath"><img src="img/here.png" alt="Vous êtes ici&nbsp;:" class="here"> <a href="…" class="first">Accueil</a><span class="sep"> &gt; </span><a href="…">Rubrique</a><span class="sep"> &gt; </span><a href="…">Sous-rubrique</a><span class="sep"> &gt; </span><strong class="on">Page courante</strong></nav>
  • Le 19 octobre 2015 à 15:25, par rakia En réponse à : Construire un fil d’Ariane efficace

    Merci pour l’article et pour votre aide, encore une petite question : pour que le fil d’ariane s’affiche dans les résultats de recherches de Google est ce qu’il doit avoir un script spécifique ?

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom