Des séparateurs accessibles

• Les séparateurs graphiques

• Des séparateurs graphiques accessibles

• La balise hr pour optimiser l'accessibilité des séparateurs

Les séparateurs graphiques

Beaucoup de concepteurs Web préfèrent l'utilisation d'images pour simuler des lignes de séparation, alors qu'il existe d'autres solutions plus commodes et plus faciles à mettre en œuvre, à savoir l'utilisation de la balise hr (horizontal rule : ligne horizontale).
Les séparateurs graphiques présentent beaucoup de points faibles, dont :

• ça implique le recours à un logiciel d'infographie (Photoshop), ce qui peut se traduire en une perte de temps et un effort supplémentaire ;
• insérer une ligne horizontale avec la balise <hr /> et plus facile qu'une image, et puis les images peuvent consommer davantage l'espace disque et la bande passante, ce qui peut éventuellement alourdir la connexion ;
• elles peuvent constituer un obstacle à l'accessibilité ;
• le non respect de la sémantique ;
• et j'en passe ...

Des séparateurs graphiques accessibles

Si vous insistez à utiliser quand même une image pour séparer le contenu de vos page Web, vous devez spécifier un texte alternatif vide avec l'attribut alt, comme ça les navigateurs texte-seul (Lynx) et les lecteurs d'écran (Jaws) vont ignorer l'image. Exemple :

<img src="separateur.png" alt="" />

Attention, il ne faut pas omettre l'attribut alt, sinon le nom du fichier (en l'occurrence : separateur.png) sera affiché par les navigateurs texte-seul (Lynx) et lu par les lecteurs d'écran (Jaws).

A titre de rappel, il ne faut jamais spécifier un attribut longdesc pour les images décoratives, comme les smilies, les séparateurs graphiques, les images d'espacement, les puces graphiques etc. Les navigateurs non visuels risquent de restituer l'attribut longdesc ce qui pourra bien embrouiller le lecteur.

La balise hr pour optimiser l'accessibilité des séparateurs

La solution que j'ai avancée semble la plus prometteuse, en fait la balise <hr /> a un sens : "ligne horizontale", ceci va vous permettre de respecter la sémantique, et ainsi d'améliorer l'accessibilité. En fait un navigateur non visuel pourra adopter un comportement adéquat vis-à-vis de la balise <hr /> car il sait qu'il s'agit d'une ligne horizontale.

Il y a aussi un autre problème, certains gens utilisent les propriétés CSS border pour simuler des lignes horizontales, là aussi la sémantique n'est pas respectée, ce qui fait que la propriété CSS pourra profiter aux navigateurs visuels uniquement. Grosso modo, utilisez la balise <hr /> pour insérer une ligne horizontale.

Chapitre suivant : des images smilies accessibles.