Lorsqu’une image informative est intégrée dans le code HTML :
alt
doit être ajouté sur la balise <img />
.alt
doit être renseigné avec une information égale ou équivalente à celle véhiculée par l’image.
Il est fortement déconseillé de rédiger le texte de remplacement d’une image en commençant par alt=“Image […]”
. Cette information est implicite et pourra être restituée aux utilisateurs d’aides techniques.
Parfois, l’image véhicule des informations riches qu’il n’est pas possible de retranscrire sous forme de texte brut, via le simple attribut alt
(schémas, graphiques complexes, etc.).
Dans cette situation, une bonne pratique d’accessibilité consiste à :
alt
qui décrit globalement la fonction de l’image.Par exemple, dans le cas d’une carte du monde qui expose les différents pays dans lesquels une marque est présente :
<img src="images/carte-implantations.png" alt="La liste des pays dans lesquels la marque Spartacus est présente sur le globe (description détaillée disponible via le lien ci-après)" /> <a href="/zones-d-implantations/">Voir la liste des pays dans lesquels la marque Spartacus est présente</a>
À noter que l’attribut longdesc
est parfois recommandé pour fournir un lien vers la description détaillée d’une image. Cependant, l’utilisation de cet attribut ne garantit pas l’accès à l’information pour tous, contrairement à l’ajout d’un lien en dur dans la page. L’emploi de la technique proposée ci-dessus est donc à privilégier.
Dans cet exemple, les images informatives sont pointées. Elles doivent être intégrées dans le code HTML et disposer d’une alternative reprenant les textes inclus dans les images tel que <img src=“generali-epargne.png” alt=“Generali Épargne - Assurance vie.” /> et <img src=“epargne-2012-2013.png” alt=“3,375% nets garantis en 2012 et 2013.” />.