Jour 22: Utilisez de vraies listes (ou imitez les correctement)

Supposez que vous avez une liste de 3 liens favoris : Le Monde Diplomatique, Pompage, et StandBlog. A la place d'une puce ronde noire et ennuyeuse, vous voulez une image sympa devant chaque lien. Comment pouvez-vous le faire ? La solution la plus courante est d'utiliser la balise <img> au devant de chaque lien. Ceci fonctionne et peut être rendu accessible en ajoutant le texte adéquat dans l'attribut alt de chaque image.

Cependant, vous pouvez aller un peu plus loin et utiliser un vrai marquage (balises <ul> et <li>) et puis utiliser une feuille CSS pour changer la puce noire triste en image. En dehors, de "la bonne façon de le faire" d'un point de vue académique, et donc que vous vous sentiez concerné ou que vous vous en foutiez, cette technique a des bénéfices supplémentaires pour l'accessibilité.

Je donnerai des exemples pour les deux techniques dans quelques minutes.

Qui en bénéficie ?

  1. Marc en bénéficie. Comme nous l'avons vu hier, Lynx affiche le nom du fichier de tout image sans attribut alt.

  2. Michel en b�n�ficie. Links n'affiche jamais les images, mais par défaut il n'affiche rien pour les images qui n'ont pas de texte alt. Ceci était acceptable lorsque nous voulions ignorer les images d'espacement, mais aujourd'hui nous voulons être sûr qu'il soit évident que ce soit une liste, nous avons donc besoin du texte dans alt.

    Egalement, quand Michel navigue avec les images désactivées, Opera affichera le texte du alt à la place d'un bloc "image manquante". Et si vous avez utilisé la technique avancée, Opera fera même mieux ; il reviendra au mode normal d'affichage de la puce noire à la place du bloc "image manquante".

  3. Jackie en bénéficie. Comme nous l'avons vu hier, JAWS lit le nom du fichier de chaque image sans attribut alt. Les liens se retrouvent perdus dans un océan de noms de fichiers non pertinents. Voilà ce que Jackie entend :

    sexy point point gif lien Le Monde Diplomatique, sexy point point gif lien pompage, sexy point point gif lien standblog

    Fournir un astérique comme texte pour alt aide énormément. JAWS verra que l'image est utilisée comme une puce et ne l'annoncera pas. Cependant, Home Page Reader continuera de dire l'astérisque explicitement, les utilisateurs entendront alors ceci :

    astérisque lien Le Monde Diplomatique, astérisque lien pompage, astérisque lien standblog

    Utiliser des listes réelles est beaucoup mieux. Comme toute la présentation visuelle est déportée dans les déclarations CSS, la page ne sera pas encombrée, ainsi JAWS tout comme Home Page Reader liront simplement votre liste pour ce qu'elle est : une liste. Maintenant voilà ce que l'on peut entendre :

    lien Le Monde Diplomatique, lien pompage, lien standblog

Comment le réaliser ?

Si vous avez une liste de liens qui ressemblent à ceci :

<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.lemondediplomatique.fr/">Le Monde Diplomatique</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://pompage.net/">Pompage</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.nitot.com/standards/blog/">StandBlog</a> <br>

Vous devriez fournir des attributs alt pour toutes les images de puce. Utilisez un astérisque pour le texte alt pour simuler ce à quoi la liste devrait ressembler si vous utilisize un vrai marquage de liste. (Pour éviter qu'elle soit affichée comme une bulle dans un navigateur visuel, vous devriez également fournir un attribut title vide.)

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.lemondediplomatique.fr/">Le Monde Diplomatique</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://pompage.net/">Pompage</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.nitot.com/standards/blog/">StandBlog</a> <br>

Comment le réaliser : expert

La technique experte (et préferrable) utilise CSS pour définir l'image que l'on utiliser comme puce.

<style type="text/css">
ul.blogroll {
  list-style: url(/images/puce-cool.gif) disc;
}
</style>

Alors dans votre gabarit, vous pouvez écrire votre liste en utilisant le marquage adapté :

<ul class="blogroll">
<li><a href="http://www.lemondediplomatique.fr/">Le Monde Diplomatique</a></li>
<li><a href="http://pompage.net/">Pompage</a></li>
<li><a href="http://www.nitot.com/standards/blog/">StandBlog</a></li>
</ul>

Résultats :

  • Les navigateurs modernes afficheront l'image comme une puce.
  • Les navigateurs avec les images désactivées afficheront la puce noire simple.
  • Netscape 4 affichera toujours la puce noire.
  • Les navigateurs texte ignoreront toujours le CSS, ils afficheront donc la liste de la même façon qu'ils affichent habituellement une liste.

Postscript : listes sans puce

Une autre façon habituelle de créer une liste de liens sans images, juste avec une série de liens, possiblement alignés sur la droite, de cette façon :

<div align="right">
<a href="http://www.lemondediplomatique.fr/">Le Monde Diplomatique</a><br>
<a href="http://pompage.net/">Pompage</a><br>
<a href="http://www.nitot.com/standards/blog/">StandBlog</a><br>
</div>

Ceci peut-être réalisé avec les CSS et un véritable balisage :

<style type="text/css">
ul.blogroll {
  list-style: none;
  text-align: right;
}
</style>

Ou, si vous désirez des liens alignés à gauche, vous pouvez faire ceci à la place :

<style type="text/css">
ul.blogroll {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

Quelque soit la manière, le balisage de la liste n'a pas changé comme dans l'exemple précédent :

<ul class="blogroll">
<li><a href="http://www.lemondediplomatique.fr/">Le Monde Diplomatique</a></li>
<li><a href="http://pompage.net/">Pompage</a></li>
<li><a href="http://www.nitot.com/standards/blog/">StandBlog</a></li>
</ul>

La ligne "list-style: none" supprime la puce noire habituelle dans les navigateurs visuels. Cela marchera dans tous les navigateurs, même Netscape 4. Meri à Tobias Schmidt pour m'avoir rappelé cette technique.

Approfondir

 
<< Jour 21 : Ignorer les images d'espacements  Jour 23 : Fournir des équivalents texte pour les images >>  Sommaire