Manuel d'accessibilité du Web : bonnes feuilles L'intégration d'images particulières
Image test ou CAPTCHA
Exemple : un test sous forme d'image, dont la réponse se trouve dans l'image. Dans ce cas le <ALT> ne peut pas retranscrire l'information donnée dans l'image sans rendre celle-ci inexploitable dans le cadre du test. Le <ALT> permet alors d'identifier la nature et la fonction de l'image, et non pas son sens.
<img src="test-3.png" alt="Troisième image test" />
Map/zone cliquable
Le cas particulier des cartes avec plusieurs régions cliquables
Exemple : une carte avec 3 régions cliquables :
le <ALT> de l'image <IMG> indique qu'il s'agit d'une carte de l'Europe ;
le est un lien vers l'ancre nommée "pays" ;
dans l'ouverture du <MAP> on retrouve l'ancre en question ;
pour chaque zone cliquable <AREA> :
- le <SHAPE> indique le type géométrique de la zone (rectangle, cercle, polygone...) ;
- le <COORDS> indique l'emplacement de cette zone sur l'image ;
- le <HREF> est le lien ;
- le <ALT> donne le nom du pays et la destination du lien.
<img src="europe.png" alt="Carte de l'Europe" usemap="#pays" />
<map name="pays">
<area shape="rect" coords="10,20,150,500" href="france.html" alt="Carte de la France" />
<area shape="circle" coords="20,50,150" href="belgique.html" alt="Carte de la Belgique" />
<area shape="poly" coords="0,10,150,15,20,5" href="espagne.html" alt="Carte de l'Espagne" />
</map>
Image avec une description longue ailleurs dans la page
Exemple : un graphique compliqué que l'on ne peut pas expliquer en moins de 120 caractères. Le <ALT> décrit brièvement de quoi il s'agit, et le <LONGDESC> est un lien vers une ancre plus loin dans la page, où l'on trouve une explication détaillée.
<img src="graphique.png" alt="graphique de l'évolution des ventes en 2010" longdesc="#legende_graphique"/>
Image avec une description longue adjacente
Exemple : un graphique compliqué que l'on ne peut pas expliquer en moins de 120 caractères. Le <ALT> décrit brièvement de quoi il s'agit, et qu'il y a une explication détaillée qui suit l'image.
<img src="graphique.png" alt="graphique de l'évolution des ventes en 2010 (description complète dans le texte qui suit l'image)" />
Image avec une description longue dans une autre page
Exemple : un graphique compliqué que l'on ne peut pas expliquer en moins de 120 caractères. Le <ALT> décrit brièvement de quoi il s'agit, et le <LONGDESC> est un lien vers une autre page, où l'on trouve une explication détaillée.
<img src="graphique.png" alt="graphique de l'évolution des ventes en 2010" longdesc="legende_graphique.html"/>
Exemple : un graphique compliqué que l'on ne peut pas expliquer en moins de 120 caractères. Le <ALT> décrit brièvement de quoi il s'agit, et le lien adjacent pointe vers une autre page, où l'on trouve une explication détaillée.
<img src="graphique.png" alt="graphique de l'évolution des ventes en 2010" /><a href=" legende_graphique.html ">Description complète de l'image</a>