Motif de conception : le fil d'Ariane

Pab. — Wed, 09 Aug 2006 13:59:00 +0200

Le fil d'Ariane (ou en anglais breadcrumbs trail) est un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Ariane représente le chemin de navigation et permet à l'internaute de se repérer dans le site et de remonter aux rubriques principales.

Plaçons-nous maintenant à la place du concepteur html, quelle est la "sémantique" HTML la plus appropriée pour cet élément ?

En parcourant un peu le web, on constate plusieurs manières de coder un fil d'Ariane, plus ou moins compliquées :

La version minimum, une suite de liens :

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

La liste, ordonnée ou non :

<ul id="breadcrumb">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Rubrique</a></li>  
  <li>Page en cours</li>
</ul>

Et pour les perfectionnistes, la liste imbriquée, dont l'idée est de reproduire la hiérarchie entre les liens :

<ul id="breadcrumb">
  <li>
    <a href="#">Accueil</a>
    <ul>
      <li>
        <a href="#">Rubrique</a>
        <ul>
          <li>Page en cours</li>
        </ul>
      </li> 
    </ul>
  </li>
</ul>

Je n'ai jamais vraiment aimé cette manière de coder un fil d'Ariane sous forme de liste. Avec une liste simple, on perd la notion de hiérarchie. A l'inverse, la solution des listes imbriquées est trop complexe et n'apporte aucun confort supplémentaire en terme de lecture ou de navigation. En terme d'accessibilité, une suite de liens ne pose pas de souci, si ils sont séparés par un caractère (ici généralement un chevron ">" ou "»").

C'est une situation typique où, à mon avis, à défaut de balise appropriée, il faut savoir choisir la voie de la simplicité. Je préfère donc écrire les liens les uns à la suite des autres, dans un simple paragraphe :

<p id="breadcrumb">
  <a href="#">Accueil</a> &gt;
  <a href="#">Rubrique</a> &gt;
  <span>Page en cours</span>
</p>

L'élément span permet de prévoir, si besoin, un style CSS particulier pour le dernier élément, c'est à dire la page en cours.

Le (x)html dans sa forme actuelle ne prévoyant pas de balise spécifique pour ce type de composant (comme le seront les menus de navigation en XHTML 2), il convient à mon avis de faire simple, et ne pas être plus royaliste que le roi. Dans le cadre d'un projet professionnel, où il est généralement important de rester pragmatique, c'est la solution qui s'avère la plus souple et la plus rapide à mettre en place.

Pablo Prieto - Blog - conception

Motif de conception : le fil d'Ariane