Focus sur les images porteuses d’information : images informatives simples et images informatives complexes.

Ce que j’ai fait :

• lire l’article Le vaste monde des alternatives textuelles : l’attribut alt(lien externe) de Julie Moynat
• lire la notice Images(lien externe) d’AcceDe Web
• lire l’article Alt-texts: The Ultimate Guide(lien externe)

Ce que j’ai appris

Images informatives

Les images porteuses d’information sont nécessaires à la compréhension du contenu qui les entoure. En conséquence :

• ces images ne doivent pas être affichées via du Cascading Style Sheets (CSS) mais en dur dans le code avec la balise <img /> pour éviter une perte d’information en cas de désactivation des styles

• l’alternative de ces images doit être renseignée (sauf si l’information sur l’image est présente également à proximité de celle-ci en texte brut : il n’est alors pas nécessaire de renseigner son attribut alt)

L’alternative doit reprendre une information équivalente à celle véhiculée par l’image, afin de ne pas léser les utilisateurs et utilisatrices qui ne peuvent la voir.

Voici quelques recommandations, tirées de l’article Alt-texts: The Ultimate Guide(lien externe). Elle sont à prendre en considération lors de la rédaction d’une alternative textuelle :

• il est inutile de commencer l’alternative par alt="Image...", car cette information sera déjà annoncée par les technologies d’assistance à la lecture de la balise <img />

• l’alternative doit être claire et courte : Accessiweb, dans son glossaire(lien externe), recommande une longueur maximum de 80 caractères. Cette recommandation est également faite par Opquast dans sa checklist sur le référencement avec la bonne pratique La longueur des alternatives textuelles est inférieure ou égale à 80 caractères(lien externe)

• il s’agit de décrire ce que vous voyez sur l’image, par exemple alt="Groupe de personnes attendant l'arrivée du train" : ajouter le nom du photographe n’est pas nécessaire, et écrire une suite de mots clés destinés au référencement est inapproprié

• la description dépend du contexte dans lequel l’image se trouve : une même image, dans un contexte différent, aura une alternative textuelle différente

• vous pouvez terminer votre alternative par un point, ce qui permettra au lecteur d’écran de marquer une pause, rendant ainsi l’expérience de lecture plus agréable

Ces recommandations sont valables dans le cas d’images porteuses d’information relativement simples. Pour les images plus complexes, comportant beaucoup d’informations et nécessitant une alternative plus détaillée, une autre méthode doit être employée.

Images informatives complexes

Prenons l’exemple de l’article de Koena, RGAA 4.1 : vers une dérive administrative de la conformité ?(lien externe). Cet article comporte une image informative complexe sur l’organisation des règles d’accessibilité web. Une description via un attribut alt n’est donc pas suffisante. Pour ce type d’image, il faut donc :

• renseigner son attribut alt avec une brève description de la fonction de l’image et une mention indiquant où trouver sa description détaillée

• une description détaillée disponible à proximité de l’image ou sur une autre page

Reprenons l’exemple de l’article de Koena. L’image comporte l’alternative suivante :

alt="Pyramide WCAG 2.1 avec principes, règles, critères et techniques. Description détaillée ci-dessous."

Une description complète et détaillée de l’image est ensuite fournie dans le corps-même de l’article.