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. Attention vide ne signifie pas qu'il n'existe pas mais que sa valeur est égale à vide (ex. : alt="").
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.
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.
Dans l'image juste avant : une alternative doit être renseignée, en reprenant le texte contenu dans l'image.
Alt= "Le pessimiste se plaint du vent, l'optimiste espère qu'il va changer, le réaliste ajuste ses voiles"
Cependant, ce type de pratique est à éviter : privilégiez du texte simple éventuellement mis en forme avec des styles CSS.
Les images-liens
L'alternative des images cliquables doivent indiquer la destination du lien.
Pour mener l'utilisateur à une page spécifique, la bonne pratique consiste à renseigner le alt de l'image par le nom de la page.
Il est possible aussi de renseigner un texte accolé à l'image et mettre le lien sur cet ensemble: grace au caption. La zone de clic est élargit, la destination est visible et accessible à tous. La destination sera donc lisible et explicite par tous: utilisateur mobile, tablette et malvoyant. Dans le cas d'image dont la signification n'est pas évidente, cela guidera tous vos utilisateurs.
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 modification le