• Qu'est-ce qu'une puce ?

• Les images servant de puces peuvent nuire à l'accessibilité

• Des puces accessibles avec les CSS

Qu'est-ce qu'une puce ?

Je parie que vous connaissez déjà ce qu'une puce peut avoir l'air, mes dames, mes demoiselles, messieurs : une puce est un petit symbole qui permet de séparer et de marquer le début des éléments d'une liste non ordonnée. Voici un exemple :

Les images non significatives qui doivent être ignorées par les navigateurs pour ne pas nuire à l'accessibilité sont :

• les images de mises en forme : les images d'espacement (spacer image) ;
• les images de présentation et de décoration : les puces, les émoticônes et les lignes de séparation.

Par défaut la puce est représentée par un petit rond noir. Pour diversifier un petit peu les concepteurs Web ont pris une mauvaise habitue. Celle qui consiste à insérer une image puis mettre du texte à côté, pour simuler une liste non ordonnée avec des puces sous forme d'images, et éventuellement emboîter le tout dans un tableau pour bien ajuster les éléments de la liste, histoire de remplacer le rond noir antique et embellir davantage son interface Web, et c'est ça qui pose le plus souvent problème, se soucier beaucoup de la présentation au détriment de l'accessibilité et du respect de la sémantique.

Les images de puces peuvent nuire à l'accessibilité

La problématique des images servant de puces peut être abrégée en ce qui suit :

• si vous mentionnez un texte alternatif (supposons puce) pour l'image servant de puce, les navigateurs qui n'affichent pas les images vont remplacer la puce par le texte alternatif, en l'occurrence par : puce ;
• si vous omettez l'attribut alt, le nom de fichier (supposons puce.png) va substituer l'image :
  • les navigateurs texte-seul, par exemple Lynx affichera : [puce.png] élément de liste ;
  • les lecteurs d'écran, par exemple Jaws lira : puce point png élément de liste.

C'est vrai on pourra remédier à cela en passant un texte alternatif vide comme on a apprit dans le chapitre précédent (attribut alt vide pour les images d'espacement). Mais j'ai une idée plus originale qui consiste à libérer le potentiel caché des CSS

Des puces accessibles avec les CSS

Vous voulez mettre une image au lieu du vieux rond noir tout en prenant soin de l'accessibilité. Je vous renvoie dans le chapitre (formatage de listes : propriété CSS list-style-image). Revenez après avoir bien compris ce à quoi sert cette propriété de style. Moi je vais prendre une petite sieste en attendant
tarrraaa, voilà je suis de retour, on va poursuivre même si j'ai un peu de vertige

Bon mettons nous au travail, notre tâche consiste à spécifier une image pour nos listes aves la propriété de style : list-style-image, et puis on va utiliser seulement la balise <ul> qui permet d'introduire une liste non ordonnée (ul : unordonned list).

Vous voyez on a combiné la balise <ul> avec la propriété CSS list-style-image au lieu du couple : images + texte brut sous forme d'éléments de liste (et éventuellement un tableau). Les gains méritent d'être cités :

• les navigateurs visuels : si l'image spécifiée avec la propriété list-style-image n'a pas été chargée, elle sera remplacée par le rond noire (puce par défaut) car on s'est servi de la balise <ul> qui signifie liste, dans l'autre cas, le navigateur qui ne connaissant pas qu'il s'agit d'une liste, il va afficher un cadre signalant que l'image est indisponible comportant le texte alternatif (s'il a été spécifié) suivi du texte brut.

• pour les navigateurs qui n'affichent pas les images, ils vont adopter un comportement adéquat avec une liste introduite par la balise <ul> :

  • les navigateurs vocaux (Jaws) ignorent les images introduites par la propriété list-style-image. En plus ils adaptent l'intonation en changeant le rythme de lecture (par exemple s'arrêter un petit peu à la fin de chaque élément de liste). Par contre des liste simulées avec des images et du texte brut, seront lues avec le même ton, en plus si l'attribut alt est omis le nom de l'image sera lu.
  • les navigateurs texte-seul (jaws) agiront d'une façon plus adéquate vis-à-vis d'une liste introduite avec la balise <ul>. Donc on va pas s'attendre à des surprises ou comportements étrangers.

Il y a une autre astuce pour pallier a l'inefficacité de la première méthode à savoir : mettre un astérisque (*) comme texte alternatif pour les images. Ainsi s'il a été restitué par les navigateurs non graphiques, le lecteur ne sera pas perturbé, car l'astérisque peut aussi remplir la fonction d'une puce.

Pour éviter que l'astérisque soit affiché par les navigateurs visuels (Internet Explorer 6 et 7), vous devez mentionner conjointement un attribut title vide. Exemple :

<img src="puce.png" alt="*" title="" />élément 1. <br />
<img src="puce.png" alt="*" title="" />élément 2. <br />

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.

Chapitre suivant : des séparateurs accessibles.