Guide pour la gestion des alternatives textuelles aux images
En accessibilité, il n’est pas toujours évident de savoir si une image doit posséder un texte de remplacement. Et si oui, quelles informations doivent y figurer.
C’est pourquoi nous vous proposons ce guide pour la gestion des attributs alt de vos balises <img />.
Ce guide se présente sous la forme d’un arbre de décision : si votre réponse à une question est « Non », alors passez à la suivante. Et ce jusqu’à ce que votre réponse soit « Oui ». De là, la manière de gérer l’attribut alt de votre image sera décrite.
À noter que ce guide est inspiré de la ressource « An alt Decision Tree » du W3C.
Est-ce que l’image sert de lien ou de bouton ?
Oui
- Et ce lien ou ce bouton n’est composé que de cette image, alors renseigner son attribut
alten précisant la destination du lien ou la fonction du bouton. - Et ce lien ou ce bouton est également composé de texte permettant à lui seul de comprendre sa destination ou sa fonction, alors laisser son attribut
altvide. - Et ce lien ou ce bouton est également composé de texte ne permettant pas à lui seul de comprendre sa destination ou sa fonction, alors renseigner son attribut alt en reprenant l’information complémentaire véhiculée par l’image.
Est-ce que l’image contient du texte ?
Oui
- Et ce texte (ou information équivalente) est également présent en texte « pur » à proximité de celle-ci, alors laisser son attribut
altvide. - Et ce texte est seulement un effet visuel (purement décoratif), alors laisser son attribut
altvide. - Et ce texte (ou information équivalente) n’est pas présent à proximité de celle-ci, alors renseigner son attribut
alten reprenant l’information véhiculée par l’image et son texte.
Est-ce que l’image est porteuse d’information ?
Oui
- Et cette information est également présente en texte « pur » à proximité de celle-ci, alors laisser son attribut
altvide. - Et l’information véhiculée peut être résumée en une courte phrase, alors renseigner son attribut
alten reprenant brièvement ces informations. - Et cette image est porteuse de nombreuses informations (tel qu’un graphique complexe), alors renseigner son attribut
alten reprenant brièvement les informations véhiculée par celle-ci ainsi qu’une mention précisant où trouver sa description détaillée.
Est-ce que l’image est purement décorative ?
Non
- Soit le type d’image concernée n’est pas couvert par ce guide.
- Soit une des précédentes questions n’a pas été répondue correctement.
Dans les deux cas de figure, n’hésitez surtout pas à nous l’exposer dans les commentaires de ce guide.
Si tel est le cas, nous vous invitons à vous référer aux recommandations des fiches suivantes :
Vos commentaires
-
Question subsidiaire : de plus en plus d’emails arrivent avec une image qui donne beaucoup d’informations (sur un événement par exemple). Mais comment gérer cela dans Outlook ? J’ai un énorme doute sur le niveau d’accessibilité lorsqu’il n’y a rien d’autre dans le corps du message…
-
Bonjour Béatrice,
Il est possible d’ajouter un texte de remplacement sur les images dans la totalité des solutions de la suite Office (Word, Outlook, PowerPoint, etc.).
Voici les pages expliquant les manipulations sur le site de Microsoft Office :
- Outlook 2010 : ajouter du texte de remplacement à une forme, une image, un graphique, un tableau, un graphique SmartArt ou un autre objet
- Outlook 2016 : ajouter du texte de remplacement à une forme, une image, un graphique, un tableau, un graphique SmartArt ou un autre objet
À noter que Microsoft recommande la saisie du champ Titre et du champ Description. De nombreuses aides techniques annoncent seulement et/ou directement le champ Description, il est donc préférable de ne remplir que celui-ci (et de fournir toutes les informations nécessaire dans ce champ).
Sébastien.
-
-
Merci Johan, c’est très clair !
-
Bonjour,
Ces règles sont-elles applicables aux « image map » que l’on voit fleurir sur nos intranets ? Je ne sais pas comment aider les contributeurs sur ce type d’image… Merci.-
Bonjour Béatrice,
Les images Map étant composées de zones cliquables, l’attribut
altdoit être renseigné en précisant soit sa destination soit sa fonction.Par exemple, pour une carte de France où chaque zone cliquable est positionnée sur une région et permet d’afficher sa description :
- L’attribut alt de l’image Map entière pourra être « Carte de France » (
<img src="…" alt="Carte de France" usemap="#carte-france" />). - L’attribut
altde la zone cliquable « Hauts-de-France » pourra être « Hauts-de-France » (<area shape="poly" coords="…" href="…" alt="Hauts-de-France" />).
Johan
- L’attribut alt de l’image Map entière pourra être « Carte de France » (
-
-
Bonjour,
Super pense-bête pour les intégrateurs et rédacteurs.
-
Bonjour,
Merci pour ce commentaire :)
Sébastien.
-
