Plongez dans l'accessibilité

Jour 25 : Utiliser des lignes horizontales (ou les simuler correctement)

Imaginez que vous vouliez une séparation entre vos entrées. Les lignes horizontales classiques (<hr> tags) sont ennuyeuses, à la place, vous utilisez une image. Cela fonctionne et peut-être aisément fait de manière accessible avec l'ajout d'un texte alt adapté.

Cependant, vous pouvez aller un peu plus et utilisez une vrai ligne horizontale, dans ce cas une astuce CSS pour l'afficher en tant qu'image dans les navigateurs modernes. Les navigateurs anciens et les navigateurs textes ignoreront le CSS et afficheront juste une ligne horizontale de manière standard. (Les navigateurs texte seul utilise une ligne de souligné ou de tirets de manière à remplir la largeur de l'écran.)

Nous donnerons des exemples des deux techniques dans une minute.

Qui en bénéficie ?

1. Jackie en bénéficie. Comme nous l'avons vu, JAWS le nom du fichier de toute image sans attribut alt.
2. Marc en bénéficie. Lynx affiche le nom du fichier de toute image sans attribut alt. Si vous utilisez une ligne horizontale, Lynx l'affichera comme une série de souligné aussi large que l'écran.
3. Michel en bénéficie. Links n'affiche rien pour les images sans texte alt, ainsi Michel n'a aucune indication que c'est un séparateur. Nous avons besoin du texte alt ou mieux encore d'une vraie balise <hr> qui seront affichés par Links comme une série de tirets aussi larges que l'écran.

Comment le réaliser ?

Si vous utilisez des images comme lignes horizontales, la pratique la plus simple pour les rendre accessible est d'ajouter un attribut alt à la balise <img>. Vous devriez également ajouter un attribut title vide, supprimer l'astuce dans les navigateurs visuels. Donc, si vous avez ceci :

<img src="/images/fancyrule.gif" width="442" height="25">

Changez le pour :

<img alt="--" title="" src="/images/fancyrule.gif" width="442" height="25">

Ne soyez pas excessif en ajoutant 80 tirets pour le texte alt. Deux ou trois suffiront amplement.

Comment le réaliser : expert.

La technique experte (et préferrée) utilise une véritable balise <hr>. Bien que certains navigateurs supportent la stylisation des balises <hr> directement, c'est tout au plus sans grande saveur, nous utiliserons une simple balise <div> pour afficher l'image. Placez le CSS suivant dans votre section <style> en haut du gabarit. (Si vous utilisez une feuille de style externe telle que style-sites.css, placez le n'importe où à l'intérieur. Si vous utilisez des feuilles de style multiples, placez le dans celle qui est compatible avec Netscape 4.)

div.hr {display: none}
/*/*/a{}
div.hr {
  display: block;
  height: 25px;
  background-image: url(/images/fancyrule.gif);
  background-repeat: no-repeat;
  background-position: center center;
  margin: 1em 0 1em 0;
}
hr {display:none}
/* */

(Pour la hauteur height, remplacez par la valeur de la hauteur de votre image. Pour le background-image, remplacez par l'adresse de votre image.)

Ensuite dans votre gabarit, lorsque vous désirez une ligne horizontale décorative, faites ceci :

<div class="hr"></div><hr />

Résultats :

• Tous les navigateurs modernes afficheront l'image à la place de la ligne horizontale simple.
• Netscape 4 affichera une règle horizontale simple.
• Les navigateurs textes ignoreront toujours le CSS, Ils afficheront donc une règle horizontale simple (habituellement par une série de soulignés ou de tirets).

Approfondir

• Cachez les CSS de Netscape 4 sans utiliser de feuilles de style supplémentaires. C'est la technique que nous utilisons dans l'exemple précédent.
• CSS1 et le HR décoratif, si vous êtes particulièrement courageux et que vous désirez des lignes horizontales décoratives en utilisant CSS dans Netscape 4. Bonne chance !