Les images

L'attribut « alt » est une alternative à l’image. Elle permet d’expliquer l’information véhiculée par l’image et est lue ou passée sous silence par les lecteurs vocaux.

Toutes les images doivent avoir un attribut "alt", même si dans certains cas, cet attribut restera vide.

Ce contenu sera également affiché dans le cas où l’image ne s’afficherait pas : problèmes réseaux ou pour certains types de handicap nécessitant la désactivation des images.

Image illustrative

Une image illustrative est une image qui n’apporte aucune information.

Si elle est supprimée, le texte alentour reste compréhensible, l’internaute ne manquera aucune information.

Dans ce cas précis, l'attribut "alt" doit être vide.

Dans notre page tri de carte , l’image illustre le texte décrit, mais n’apporte aucune information supplémentaire. L’alternative doit donc être vide :

Astuce sous NPS 6

Vous devrez utiliser le type : « image layout », les champs « alternative » et « title » devront être vides.

Image apportant une information

  • Une image sur laquelle il y a un lien apporte obligatoirement une information.
  • Une image contenant du texte apporte une information dans la majorité des cas.
  • Une image permettant d’identifier un lieu, une personne connue ou une situation apporte également une information qu’il faudra expliciter dans l’alternative de l’image si elle n’est pas présente dans le texte autour.

Dans ce cas, l’alternative doit fournir les informations contenues de manière concise et significative.

“Le pessimiste se plaint du vent, l'optimiste espère qu'il va changer, le réaliste ajuste ses voiles.”

Dans l'image ci-dessus : une alternative doit être renseignée, en reprenant le texte contenu dans l'image. Cependant, ce type de partique est à éviter: il vaut mieux privilégier du texte simple eventuellement mis en forme avec des styles CSS.

 

 

Si vous voulez en savoir plus sur l'accessibilité des images, n'hésitez pas à nous contacter.

Astuce AEM

Pour renseigner un alt sur une image, il faut se positionner sur l 'image dans les ressources puis propriétés de l'image et renseigner le champs "titre"

Dernière mise à jour