Texte alternatif pour les images

Utiliser l'attribut alt pour fournir des alternatives textuelles aux images

Alice Boxhall

Dave Gash

Meggin Kearney

Les images sont un élément important de la plupart des pages Web et constituent, bien entendu, un problème particulier pour les utilisateurs malvoyants. Nous devons prendre en compte le rôle d'une image dans une page pour déterminer le type de texte alternatif qu'elle devrait avoir. Regardez cette image.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

Une étude montre que 9 chats sur 10 jugent silencieusement leurs propriétaires pendant leur sommeil

La page qui s'affiche représente un chat, qui illustre un article sur le comportement critique connu des chats. Un lecteur d'écran annoncera cette image en utilisant son nom littéral, "/160204193356-01-cat-500.jpg". C'est précis, mais pas du tout utile.

Vous pouvez utiliser l'attribut alt pour fournir une alternative textuelle utile à cette image, par exemple "Un chat qui part dans l'espace de manière menaçante".

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

Le lecteur d'écran peut ensuite énoncer une brève description de l'image (visible dans la barre VoiceOver noire). L'utilisateur peut alors choisir de passer à l'article.

Quelques commentaires sur alt:

• alt vous permet de spécifier une chaîne simple à utiliser chaque fois que l'image n'est pas disponible, par exemple en cas d'échec de chargement de l'image, si un robot d'exploration du Web y accède ou lorsqu'un lecteur d'écran y accède.
• alt diffère de title, ou de n'importe quel type de légende, dans la mesure où il n'est utilisé que si l'image n'est pas disponible.

Rédiger un texte alternatif utile est un peu d'art. Pour qu'une chaîne constitue une alternative textuelle utilisable, elle doit transmettre le même concept que l'image, dans le même contexte.

Pensez à ajouter un lien vers une image de logo dans le masthead d'une page, comme ceux indiqués ci-dessus. La description assez précise de l'image est "The Funion logo".

<img class="logo" src="logo.jpg" alt="The Funion logo">

Il peut être tentant de lui donner un texte plus simple, comme "Accueil" ou "Page principale", mais cela nuit à la fois aux utilisateurs malvoyants et aux personnes voyantes.

Mais imaginez un utilisateur de lecteur d'écran qui souhaite localiser le logo du masthead sur la page. Le fait de lui attribuer la valeur "alt" de "home" crée en fait une expérience plus déroutante. Un utilisateur voyant doit relever le même défi qu'un lecteur d'écran : comprendre ce que fait un clic sur le logo du site.

En revanche, il n'est pas toujours utile de décrire une image. Prenons l'exemple d'une loupe à l'intérieur d'un bouton de recherche avec le texte "Rechercher". Si le texte n'était pas là, vous donneriez à cette image la valeur alt "search". Toutefois, comme nous avons le texte visible, le lecteur d'écran détectera et lira le mot "search" à voix haute. Par conséquent, une valeur alt identique sur l'image est redondante.

Toutefois, nous savons que si nous omettant le texte alt, nous entendons probablement le nom du fichier image à la place, ce qui est à la fois inutile et potentiellement déroutant. Dans ce cas, vous pouvez simplement utiliser un attribut alt vide pour que le lecteur d'écran ignore complètement l'image.

<img src="magnifying-glass.jpg" alt="">

En résumé, toutes les images doivent comporter un attribut alt, mais elles ne doivent pas toutes contenir du texte. Les images importantes doivent comporter un texte alternatif descriptif qui décrit succinctement l'image, tandis que les images décoratives doivent avoir des attributs alt vides (à savoir alt="").