Texte alternatif (attribut alt) : le guide ultime

Traduction de l’article « Alt-texts: The Ultimate Guide » publié le 15 octobre 2017, par Daniel Göransson sur Axess Lab.

Thank you Daniel for allowing me to publish this translation.

Note du traducteur : Avec le langage HTML l’insertion d’une image dans une page Web se fait avec la balise <img />. Cette balise requiert deux attributs : src et alt. Elle peut en avoir d’autres, comme : height, src, width…

Cet article contient tout ce que vous devez savoir sur le texte alternatif (attribut Alt) d’une image. Quand l’utiliser et comment le rédiger parfaitement.

Article écrit par moi, Daniel, un développeur Web ayant une déficience visuelle qui utilise un lecteur d’écran au quotidien (et traduit par moi, Cyrille, qui y voit plutôt bien, et essaie d’aider ceux qui n’ont pas cette capacité).

Bien nommer les choses (note du traducteur)

« Attribut alt » ou « balise alt » ?

On voit souvent le terme « balise » associé à alt. C’est une erreur. Alt est un attribut de la balise <img>. Prenons soin de bien nommer les choses pour ne pas ajouter au malheur du monde, comme disais Albert Camus.

Si vous avez des doutes, la documentation de Mozilla devrait les dissiper : les balises HTML et leur rôle et liste des attributs HTML.

Mon expérience des images sur le web

J’utilise une combinaison de grossissement et de lecteur d’écran pour surfer sur le Web. En règle générale, j’utilise le grossissement sur des écrans plus grands et un lecteur d’écran sur des appareils plus petits.

Comme tout le monde, je rencontre de nombreuses images lorsque je surfe sur le Web. Quand j’utilise un lecteur d’écran, je dépends de la description de l’image : le texte alternatif ou attribut alt.

Bien souvent, le texte alternatif n’est pas utile, souvent même c’est une perte de temps car il n’a aucun sens.

Permettez-moi d’illustrer cela avec la page d’accueil de The Verge (en). Voici à quoi cela ressemble pour les voyants :

Ci-dessous, voici ce que je « vois ». J’ai remplacé les images par ce que mon lecteur d’écran lit :

Pas très utile, n’est-ce pas ?

Voici quelques textes alternatifs incorrects auxquels je suis couramment confronté :

• « Cropped_img32_900px.png » ou « 1521591232.jpg » – le nom des fichiers, probablement parce que l’image n’a pas d’attribut alt.
• « <Titre de l’article> » – sur chaque image de l’article, probablement pour « améliorer » le référencement naturel (SEO).
• « Photographe : Jessica Trizévit » – sans doute parce que l’éditeur ne sait pas à quoi sert un texte alternatif.

Les textes alternatifs ne sont pas toujours aussi mauvais, mais il y a généralement pas mal d’amélioration à apporter. Ainsi, que vous soyez un débutant complet ou que vous souhaitiez passer à la vitesse supérieure, voici mon guide ultime des textes alternatifs.

Qu’est-ce qu’un texte alternatif ?

Un texte alternatif est la description d’une image qui est fournie à des personnes qui, pour une raison quelconque, ne peuvent pas voir l’image.

Entre autres, les textes alternatifs aident :

• les personnes ayant des problèmes de vue,
• les personnes qui ne chargent pas les images pour accélérer leur connexion,
• les moteurs de recherche.

Le premier groupe (les personnes ayant des problèmes de vue) est sans doute celui qui bénéficie le plus des textes alternatifs. Ils utilisent ce qu’on appelle un lecteur d’écran pour naviguer sur le Web. Un lecteur d’écran transforme les informations visuelles en discours ou en braille. Pour ce faire, les images des sites Web doivent comporter des textes alternatifs.

Les textes alternatifs sont super importants ! Si important que les directives d’accessibilité aux contenus Web (WCAG) ont comme toute première directive (en) : les textes alternatifs.

Tout contenu non textuel présenté à l’utilisateur a une alternative textuelle qui remplit le même objectif.
– directive 1.1.1 des WCAG

Comment ajouter un texte alternatif ?

En HTML, le texte alternatif (alt) est un attribut obligatoire d’un élément image <img /> :

HTML

<img src="chien.jpg" alt="Chien jouant dans une prairie." />

La plupart des systèmes de gestion de contenu (CMS), tels que WordPress, permettent de saisir le texte alternatif après avoir téléversé une image :

Le champ est généralement appelé « Alt-text », « Texte alternatif » ou « Alt », mais dans certaines interfaces, il est appelé « Description de l’image » ou quelque chose de similaire.

Mise à jour le 13 mai 2019 : WordPress 5.2 réorganise l’interface de saisie des informations de l’image pour mettre en avant le champ de saisie du texte alternatif.

La zone de saisie du texte alternatif est maintenant accompagné d’une explication et d’un lien vers un arbre de décision (en anglais) sur la rédaction du texte alternatif issue des didacticiels sur l’accessibilité proposé par le W3C.

Créons le texte alternatif parfait

Voici les étapes à suivre pour créer des textes alternatifs fabuleux.

Décrivez l’image

Cela peut sembler évident, mais un texte alternatif devrait décrire l’image.

Par exemple :

• « Groupe de personnes dans une gare. »
• « Bébé heureux jouant dans un bac à sable. »
• « Cinq personnes faisant la queue au supermarché. »

Les éléments qui n’appartiennent pas à un texte alternatif sont :

• Le nom du photographe. Ceci est très commun, mais n’a pas de sens.
• Mots-clés pour l’optimisation des moteurs de recherche. N’encombrez pas le texte alternatif avec des mots non pertinents que vous espérez bien classer auprès de Google. Ce n’est pas ce à quoi servent les textes alternatifs et cela va dérouter vos utilisateurs.

Le contenu du texte alternatif dépend du contexte

La description de l’image dépend de son contexte. Laissez-moi vous donner un exemple :

Si cette image figurait dans un article sur la photographie, le texte alternatif pourrait ressembler à :

• « Gros plan, photo noir et blanc d’un homme en extérieur, visage net, arrière-plan flou. »

Si l’image se trouve sur un site Web à propos d’une série télévisée, un texte alternatif approprié pourrait être complètement différent :

• « Star du spectacle, Sam Eugène, l’air tendu sous la pluie. »

Écrivez donc un texte alternatif aussi significatif que possible pour l’utilisateur dans le contexte dans lequel il se trouve.

Soyez concis

En lisant le chapitre précédente, vous vous dites peut-être : « Avec mes yeux, je peux voir beaucoup de détails dans l’image, comme par exemple de qui il s’agit, le type de photo, le type de vêtements, l’âge approximatif, etc. Pourquoi ne pas écrire un texte alternatif long et détaillé afin qu’un utilisateur malvoyant ait autant d’informations que moi ? »

Merci de poser la question !

Bon franchement, les informations utiles de l’image s’obtiennent d’un coup d’œil, et c’est ce que nous essayons de faire également pour les utilisateurs de lecteurs d’écran. Donnez les informations nécessaires dans le texte alternatif en étant aussi bref et concis que possible.

Une des rares fois où vous devriez écrire de longs textes alternatifs c’est lorsque vous décrivez une image contenant un texte important.

Idéalement, vous ne devriez pas avoir du texte sur une image, mais vous en avez parfois besoin. Comme sur certaines captures d’écran ou des photos d’écriteau.

Mais la règle générale est de rester concis et d’éviter le verbiage.

Ne dites pas que c’est une image

Ne commencez pas les textes alternatifs avec « Image de », « Photo de » ou similaire. Le lecteur d’écran l’ajoutera par défaut. Donc, si vous écrivez « Image de » dans un texte alternatif, un lecteur d’écran dira « Image image de… » lorsque l’utilisateur voudra lire l’image. Pas très agréable.

Une chose que vous pouvez faire est de terminer le texte alternatif en indiquant qu’il s’agit d’un type d’image particulier, comme une illustration.

« Chien sautant à travers un cerceau. Illustration. »

Terminez par un point.

Terminez le texte alternatif avec un point. Ainsi, les lecteurs d’écran feront une pause un peu après le dernier mot du texte alternatif, ce qui donnera une lecture plus agréable à l’utilisateur.

Ne pas utiliser le titre de l’image

De nombreuses interfaces de gestion des images proposent un champ titre de l’images à coté du champ texte alternatif. Laissez tomber le texte du titre ! personne ne les utilise.

Ils ne fonctionnent pas sur les écrans tactiles et sur les ordinateurs ils nécessitent que l’utilisateur laisse le pointeur de la souris sur l’image pour apparaître, ce que personne ne fait.

De plus, l’ajout d’un texte de titre conduit certains lecteurs d’écran à lire à la fois le texte du titre et le texte alternatif, ce qui est redondant. Par conséquent, ne mettez pas de titre aux images.

Quand ne pas utiliser un texte alternatif

Dans la plupart des cas, vous devez utiliser un texte alternatif pour les images, mais il existe des exceptions pour lesquelles vous devez laisser le texte alternatif vide.

Remarque importante : ne supprimez jamais l’attribut alt, cela briserait le standard HTML. Mais vous êtes autorisé à laisser le champ vide, c’est-à-dire :

HTML

alt=""

Faites cela dans les cas suivants.

Images répétées dans les flux

Imaginez que vous faites défiler votre flux Twitter. Chaque fois que vous voulez lire un nouveau tweet, vous devez d’abord écouter « Image de profil de l’utilisateur <nom d’utilisateur de la personne qui a posté> ». À mon avis, ce serait très agaçant.

Autres exemples de flux :

•    une liste de liens vers des articles. Comme celui de ma page Articles,
•    un flux de discussion ou de messagerie,
•    un flux de commentaires.

Par conséquent, pour une expérience utilisateur idéale, laissez le texte de remplacement vide pour les images utilisées de manière répétée dans les flux.

Icônes avec du texte

Vous devriez toujours avoir des icônes accompagnées de texte (en). En supposant que vous le fassiez, l’icône ne devrait pas avoir de texte alternatif.

Laissez-moi vous expliquer pourquoi.

Prenons par exemple un bouton de média social :

Si vous donnez un texte alternatif à l’icône Facebook, un lecteur d’écran dira quelque chose comme : « Facebook Facebook ». C’est redondant !

OK, techniquement, il ne s’agit pas de textes alternatifs, mais c’est important : assurez-vous que l’icône et le texte du lien se trouvent dans le même attribut lien, pour obtenir une expérience fluide.

Comme ça :

HTML

<a href="...">
  <img src="icone-facebook.png" alt="" />
  Facebook
</a>

Une autre erreur commune avec les icônes est avec les boutons menu :

Si le bouton de menu n’a pas d’étiquette visible (ce qui, soit dit en passant, est vraiment mauvais pour l’expérience utilisateur), alors il lui faut un texte alternatif (ou une autre façon de décrire sa fonction, comme l’attribut aria-label). Expliquez la fonction de l’icône, telle que « Menu ». N’écrivez pas « Trois lignes horizontales » ou « Hamburger principal », qui sont malheureusement des exemples concrets sur lesquels je suis tombé.

Si l’icône de menu a une étiquette, vous devez laisser le texte alternatif vide. Je trouve souvent des boutons de menu qui sont lu « Menu Menu ». Une fois, je suis même tombé sur « Menu du menu Hamburger ». Un peu déroutant n’est-ce pas ?

Images en liens

Généralement, une image dans un lien est accompagnée d’un texte de lien. Comme dans l’exemple ci-dessous :

Dans ce cas, l’image et le lien doivent se trouver dans la même étiquette du lien du code HTML. Vous pouvez alors laisser le texte de remplacement vide. L’important pour l’utilisateur est d’entendre le texte du lien. Un texte alternatif de l’image ne ferait que distraire en ajoutant des informations que l’utilisateur ne jugerait pas nécessaires. L’image se trouve probablement sur la page qui est liée et vous pourrez ensuite l’expliquer correctement dans le texte alternatif.

Si vous devez absolument avoir une image dans un lien sans texte d’accompagnement, le texte alternatif devrait alors décrire la destination du lien, pas l’image.

Images décoratives

De préférence, les images décoratives qui ne transmettent aucune signification à l’utilisateur doivent être placées en tant qu’images d’arrière-plan dans le CSS. Cela va probablement de soi, mais ça signifie que vous n’avez pas besoin du tout de texte alternatif.

Je classerais la plupart des images sur lesquelles vous placez du texte comme décoratives. Vous n’avez pas besoin d’un texte alternatif avec elles. Un exemple est l’image d’arrière-plan sur la page d’accueil de Netflix :

Cas spéciaux

Logo dans l’en-tête

Le logos dans l’en-tête est presque toujours lié à la page d’accueil du site Web. Les opinions varient un peu sur le sujet des textes alternatifs pour les logos.

Certains disent qu’il devrait inclure le nom de la société, le fait qu’il s’agisse d’un logo et la destination du lien. Comme ceci :

• « Axess Lab, logo, allez à la page d’accueil. »

À mon avis, c’est un peu bavard. Trop de bruit ! Comme mon lecteur d’écran me dit déjà qu’il s’agit d’une image et d’un lien, j’ai seulement besoin d’entendre le nom de la société. Du fait qu’il s’agisse d’une image, je présume qu’il s’agit d’un logo et que c’est un lien, je présume aussi qu’il suit les conventions et les liens vers la page de démarrage.

SVG

Scalable Vector Graphics (SVG), en français graphique vectoriel adaptable, est un format d’image de plus en plus populaire sur le Web. Et j’aime les images SVG ! Elles gardent leur netteté lors du zoom et sont moins lourdes ce qui permet aux sites Web de se charger plus rapidement.

Il existe deux manières principales d’ajouter un SVG à une page HTML :

1. À l’intérieur d’un élément « img ». Dans ce cas, ajoutez simplement un texte alternatif comme d’habitude :

HTML

<img src="chien.svg" alt="Chien se roulant dans l’herbe." />

2. Utiliser une balise « svg ». Si vous utilisez cette méthode, vous ne pouvez pas ajouter d’attribut alt car le HTML ne le supporte pas. Cependant, vous pouvez contourner ce problème en ajoutant deux attributs wai-aria :

role="img" aria-label="<texte alternatif>".

En fait, pour le second cas, vous êtes supposé pouvoir ajouter votre texte alternatif en tant qu’élément titre dans le svg, mais les navigateurs et les technologies d’assistance ne le prennent pas suffisamment en charge pour le moment.

Une machine peut-elle faire ça pour moi ?

Bien que l’apprentissage automatique et l’intelligence artificielle s’améliorent rapidement et permettent de décrire certaines images avec une grande précision, elles ne permettent pas encore de comprendre le contexte.

En plus de cela, les machines ne sont pas assez douées pour décider ce qui est concis et décriront souvent trop ou trop peu l’image.

Facebook a en fait intégré une fonctionnalité qui décrit les images automatiquement. Mais j’ai l’impression que les descriptions sont généralement trop vagues.

Une image dans mon flux en ce moment est décrite comme : « Chat à l’intérieur ». En fait la photo montre un chat en train de chasser une souris en plastique.

Donc, je suis désolé, vous devez encore écrire les textes alternatifs vous-même.

Merci de rendre le Web meilleur

Je suis ravi que vous ayez lu jusqu’au bout. Cela signifie que vous vous souciez de faire du Web un meilleur endroit pour tous les utilisateurs. Diffusez les connaissances et restez génial.

Auteur : Daniel Göransson, traduction : Cyrille Sanson

Ressources supplémentaires

Bien utiliser l’attribut alt de Dudley Storey (traduction Pierre Choffé, 3 oct. 2015)

Un article en anglais sur le texte alternatif accompagné d’études de cas qui montre quels sont les cas ou alt doit être vide.