Images informatives

Pratiques exemplaires pour les images informatives

Les images informatives véhiculent des renseignements simples qui peuvent être exprimés dans une courte phrase. L’équivalent textuel doit transmettre le sens ou le contenu essentiel de l’image.

Suivez les pratiques exemplaires suivantes pour ce qui a trait aux images informatives:

  • Utiliser l’attribut alt de l’élément img pour fournir un équivalent textuel.
  • Fournir des équivalents textuels significatifs qui transmettent l’intention, le but et le sens de l’image.
  • Ne pas inclure les mots « image de » ou « graphique » dans le texte de remplacement. Les lecteurs d’écran déclarent le rôle d’une image (soit « image de » ou « graphique »); les utilisateurs n’ont pas besoin de cette information dans l’équivalent textuel.
  • Le texte de remplacement doit être concis et comporter moins de 150 caractères.
  • Lorsqu’une image contient des mots importants pour la compréhension du contenu, le texte de remplacement doit inclure ces mots.

Bon exemple : Images utilisées pour compléter d’autres renseignements

L’image suivante montre un chien portant une clochette. Elle complète le texte adjacent qui explique le rôle de cette clochette. Un court équivalent textuel suffit pour décrire l’information qui est affichée visuellement, mais qui n’est pas expliquée dans le texte; dans ce cas, l’équivalent textuel est « Chien avec une clochette attachée à son collier ».

Remarque : Si le texte adjacent comprenait une explication de la façon dont le chien porte la clochette ("attachée à son collier"), l’image serait considérée comme redondante. Comme ce n’est pas mentionné dans le texte, l’image est considérée comme informative.

Chien avec une clochette attachée à son collier.
Les chiens-guides qui ne sont pas en service portent souvent une clochette dont le bruit aide le propriétaire aveugle à repérer l’emplacement du chien.

HTML

<figure>
   <img src="dog.jpg" alt="Chien avec une clochette attachée à son collier."> 
   <figcaption>Les chiens-guides qui ne sont pas en service portent souvent</figcaption>
</figure>

Cet exemple est tiré des tutoriels sur l’accessibilité du Web de l’IAW : Images informatives. Eric Eggert, Shadi Abou-Zahra, éd. Copyright © 2019 W3C® (MIT, ERCIM, Keio, Beihang). Statut : Mise à jour le 27 juillet 2019. Images informatives (IAW�)

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Techniques

Haut de la page