Texte alternatif pour les images

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

Alice Boxhall

Dave Gash

Meggin Kearney

Les images constituent un élément important de la plupart des pages Web et sont bien entendu un point d'achoppement particulier pour les utilisateurs ayant une déficience visuelle. Nous devons tenir compte du rôle qu'une image joue sur une page pour déterminer le type de texte alternatif qu'elle devrait avoir. Examinez 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 discrètement leurs propriétaires lorsqu'ils dorment

La page présente une photo d'un chat, illustrant un article sur le comportement de jugement bien connu des chats. Un lecteur d'écran annoncera cette image en utilisant son nom littéral, "/160204193356-01-cat-500.jpg". C'est exact, mais pas du tout utile.

Vous pouvez utiliser l'attribut alt pour fournir un texte alternatif utile à cette image, par exemple "Un chat qui fixe 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 annoncer une description succincte de l'image (visible dans la barre VoiceOver noire), et l'utilisateur peut choisir de passer à l'article.

Voici 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 lorsque l'image ne se charge pas, est consultée par un robot d'exploration Web ou est détectée par un lecteur d'écran.
• alt diffère de title ou de tout autre type de légende en ce sens qu'il n'est utilisé que si l'image n'est pas disponible.

Rédiger un texte alternatif utile est un peu un art. Pour qu'une chaîne puisse être utilisée comme alternative textuelle, elle doit véhiculer le même concept que l'image, dans le même contexte.

Vous pouvez inclure dans le masthead d'une page un logo associé à un lien, comme ceux présentés ci-dessus. Nous pouvons décrire l'image de manière assez précise comme "Logo de Funion".

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

Il peut être tentant de lui attribuer un texte alternatif plus simple, comme "Accueil" ou "Page principale", mais cela ne sert pas les utilisateurs ayant une déficience visuelle ni les utilisateurs voyants.

Mais imaginez qu'un utilisateur de lecteur d'écran souhaite localiser le logo du masthead sur la page. Si vous lui attribuez la valeur alternative "home" (accueil), cela crée en réalité une expérience plus déroutante. Un utilisateur voyant doit également déterminer l'action effectuée en cliquant sur le logo du site, tout comme un utilisateur de lecteur d'écran.

En revanche, il n'est pas toujours utile de décrire une image. Par exemple, imaginons une image de loupe dans un bouton de recherche avec le texte "Rechercher". Si le texte n'était pas présent, vous auriez certainement attribué à cette image une valeur alt de "recherche". Toutefois, comme le texte est visible, le lecteur d'écran détecte et lit à voix haute le mot "recherche". Par conséquent, une valeur alt identique sur l'image est redondante.

Toutefois, nous savons que si nous laissons le texte alt de côté, 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, et le lecteur d'écran ignorera complètement l'image.

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

Pour résumer, toutes les images doivent comporter un attribut alt, mais elles n'ont pas toutes besoin de 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, c'est-à-dire alt="".