Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

5.2.2. Renseigner l'attribut alt sur les images informatives

Lorsqu’une image informative est intégrée dans le code HTML :

  • Un attribut alt doit être ajouté sur la balise <img />.
  • Cet attribut alt doit être renseigné avec une information égale ou équivalente à celle véhiculée par l’image.

Attention

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.

Remarque : les images véhiculant des informations riches

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 à :

  • Renseigner un court texte de remplacement dans l’attribut alt qui décrit globalement la fonction de l’image.
  • Prévoir une zone de contenu dans laquelle proposer une description détaillée de l’image. De préférence, soit directement sous l’image, soit par l’intermédiaire d’un lien vers une autre page. Dans le cas de graphiques ou schémas complexes, la description détaillée la plus adaptée est souvent un tableau de données ou une liste.
  • Indiquer dans le texte de remplacement de l’image le moyen d’accéder à la description plus détaillée.

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.

Exemples


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.” />.

Recommandations associées

notices/html-css/renseigner-l-attribut-alt-sur-les-images-porteuses-d-information.txt · Dernière modification: Le 06/03/2013 à 16:34 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :