Le web est plus fort lorsqu’il est divers : plus il est accessible, meilleur est ce qu’il nous offre. L’attribut alt est un exemple déjà ancien de ce que nous pouvons faire pour améliorer l’accessibilité, mais pour bien écrire un texte alternatif pour vos images il est utile de connaître quelques règles.

L'attribut alt

Qu'est-ce que l'attribut alt ? c'est la représentation alternative d’une image sous forme de texte. Si une image ne se charge pas ou si elle est bloquée, la valeur de l’attribut alt s’affichera à la place. Les utilisateurs d’outils pour l'accessibilité pourront entendre le texte lu à haute voix ou lire sa transcription en braille. Optimiser alt est également utile pour le SEO, car il fait partie des informations permettant aux moteurs de recherche de déterminer le contenu d’une image et d’associer votre site aux termes de recherche.

L’attribut alt (souvent appelé par erreur la “balise alt”) est obligatoire pour tous les éléments <img> de votre site. La plupart du temps, la façon la plus simple de rédiger un texte alternatif est d’écrire ce que vous diriez si vous faisiez le description de l’image à quelqu’un. Par exemple une photographie de canal à Amsterdam pourrait être décrite ainsi :

<img src="singel.jpg" alt="Crépuscule à Jordaan, Amsterdam, Hollande">

Ou encore (et mieux) :

<img src="singel.jpg" alt="Une rangée de maisons aux fenêtres illuminées le long d’un canal à Amsterdam">

D’une manière générale, plus le texte est descriptif, meilleur il est.

Exceptions à alt : les logos

Si le contenu principal d’une image est un texte, les règles changent. Les images bitmap présentant un texte intégré, comme celle-ci :

…devrait avoir une valeur d’attribut alt reflétant directement le texte de l’image.

<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">

La raison en est simple : la plupart des lecteurs d’écran ne savent pas bien reconnaître et traduire le texte d’une image, celui-ci est donc impénétrable à la fois pour les moteurs de recherche et pour les personnes malvoyantes. En plaçant le texte dans alt, vous faites la traduction pour eux.

NB : vous verrez souvent ce genre de balisage pauvre, Ne faites pas cela :

<img src="logo.gif" alt="Logo">

C’est aussi une excellente raison d’utiliser le SVG en ligne pour les logos. Correctement construit, un logo SVG sera un vrai texte, lisible par tous. Il est important de noter que si le texte est dispersé en plusieurs chemins SVG, sa valeur sémantique est perdue. Une solution alternative (et peut-être meilleure) est de conserver la partie graphique du logo en SVG et d’écrire le reste dans le balisage auquel on appliquera un style. Bien sûr les deux options doivent être examinées en tenant compte du temps que prendra le chargement d’une police de caractères embarquée.

alt vide

Il y a deux cas dans lesquels on peut laisser vide l’attribut alt :

• l’image est purement décorative, c’est à dire qu’elle n’a pas de valeur informative;
• l’image est décrite de manière appropriée par un élément sémantique qui la suit immédiatement, généralement une légende <figcaption>.

Si vous voulez que votre page reste valide, alt doit malgré tout être présent dans <img>, et pour indiquer qu’il est vide on lui donne la valeur "" (guillemets ouvrant et fermant sans espace entre les deux).

<img src="flourish.png" alt="">

Une autre solution en HTML5 est de laisser l’attribut alt sans valeur :

<img src="flourish.png" alt>

Dans certaines occasions rares, la valeur de alt peut être très proche du texte en légende (<figcaption>), dans ce cas le texte alternatif est redondant et peut être laissé vide.

<figure>
	<img src="rio-di-san-barnaba.jpg" alt>
	<figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
</figure>

Les différences peuvent être subtiles : alt décrit une image, alors que <figcaption> intitule le contenu de l’élément <figure>. Dans la plupart des cas, les deux seront différents et devraient donc être conservés :

<figure>
	<img src="doge-portrait.jpg" alt="Peinture à l'huile représentant un homme âgé portant un couvre-chef et un manteau brodé">
	<figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption>
</figure>

Ne confondez pas alt et title

On trouve parfois des balisages qui appliquent la même valeur à alt et à title. En général, c’est une mauvaise idée. Le texte de title, qui apparaît en pop-up, est rarement vu par les utilisateurs car il faut quelques secondes avant qu’il ne surgisse, et il ne sera pas lu par les outils d’accessibilité sauf si l’élément est en focus.

Positionnement de alt

Les lecteurs d’écran lisent le texte de alt en ligne avec le reste du contenu, par conséquent il est souhaitable d’écrire le texte descriptif dans un flux contextuel, en particulier si l’image est flottée.

Ne négligez pas les autres media

alt est presque exclusivement associé aux images, mais cela ne signifie pas que le texte descriptif des autres formats de media doive être négligé : les vidéos et les audios devraient par exemple utiliser les sous-titres WebVTT.

Photo par MorBCN, sous licence Creative Commons.