ALT, un texte alternatif

Dans le Web Design il faut prendre en compte l’accessibilité. Faire du beau, c’est bien, mais on oublie souvent qu’il n’y a pas que des personnes avec un écran plat de 28 pouces derrière un beau bureau.

L’accessibilité utilisateur fait partie du travail inhérent à la fonction du Web designer. Voyons ça en détail…

Un exemple concret. Quand le robot Google va passer sur votre site pour le scanner et le référencer, il va faire l’inventaire de tout ce qu’il y a dedans. Autrement dit, il récupére tous les textes et les références s’il le veut. Mais pour une image il ne fera rien. Une image ne pas être définis concrètement par un robot, pour lui c’est que du code binaire (des 1 et des 0). À moins que…

ALT, un texte alternatif :

C’est là que le texte alternatif intervient. C’est un point souvent négligé en accessibilité. Il suffit de définir un attribut alt sur les images. Ça veut dire qu’avec ce texte, le robot pourra comprendre ce que contient votre image.

 <img src="img/logo-entreprise.png" alt="Mon entreprise" width="250" height="250" />

Je ne vais pas expliquer en détail quelle définition mettre dans la balise alt, car cela demande un peu de réflexion, vous ne pouvez pas vous contenter d’écrire ce que vous voyez, c’est un peu plus subtil. Je vous invite à lire l’article de pompage qui définit bien tout ça.
Sachez tout de même pour résumer, que pour choisir un bon texte alternatif il y a deux éléments à prendre en compte : le contexte dans lequel se trouve votre image au sein de votre contenu (s’il y en à un) et quelle fonction votre image sert sur le texte.

ALT, une mise en forme

Mettre du alt partout c’est bien beau. Mais imaginez le scénario suivant : vous envoyez une newsletter et les images ne s’affichent pas (c’est ce qui se passe bien souvent quand l’utilisateur reçoit une newsletter pour la première fois par exemple). Que va-t-il rester ? Rien.

Exemple d’un cas extrême :

Pour contrer ce problème, l’idée est de styler l’attribut ALT. C’est une bonne alternative (à l’alternative) pour éviter de voir votre design complètement cassé.

Plusieurs solutions pour la mise en forme, soit par le CSS, avec les sélecteurs d’attributs comme je l’avais écrit dans un article précédent.

img[alt]  {
color: red;
}

Ou alors, si c’est dans une newsletter, le mieux c’est de styler les images directement sur l’élément en question ou sur l’élément parent.

<img src="/logo.jpg" width="750" height="151" alt="Titre de ma Newsletter" style="text-indent:200px;">

Points à retenir :

  • Garder un texte alternatif, clair et concis (voir l’article de pompage)
  • Définir une hauteur et une largeur sur vos images, sinon, si l’image ne s’affiche pas alors le bloc sera tout petit et pas de place pour afficher le texte alternatif.

En bonus :
un service intéressant pour envoyer vos newsletter : http://mailchimp.com/

Source :

  • http://csswizardry.com/2011/06/styling-alt-text-on-images/
  • http://www.email-standards.org/