Jour 24 : Fournir des équivalents texte pour les images cliquables

J'ai été relativement surpris de trouver de nombreux sites Web renommés utilisant des images cliquables côté client. Je ne les utilise pas moi-même et je ne pense pas qu'elles soient incluses dans un gabarit par défaut de carnet Web, mais apparement de nombreuses personnes les utilisent. Si vous ne savez pas ce qu'est une image cliquable, Leslie Harpold en utilise une pour les liens de navigation de sa page d'accueil. Il s'agit d'une image unique, mais lorsque vous cliquez sur le mot "archives", cela vous emmènera sur une page, "by category" sur une autre et ainsi de suite.

Les images cliquables ressemblent à un cauchemar pour l'accessibilité, mais ce n'est pas le cas. De la même manière que chaque image a besoin d'un équivalent texte, chaque image cliquable et chaque zone cliquable de l'image doit avoir un équivalent texte. Vous pouvez fournir le texte alt pour l'image elle-même (dans la balise <img>), et pour chacune des zones cliquables dans l'image (dans les balises <area> du <map> associé, qui définit les relations entre les zones cliquables et les liens).

Qui en bénéficie ?

  1. Marc en bénéficie. Lynx affiche le texte de l'image comme un lien. Quand Marc entre ENTER, Lynx affiche une page différente listant les liens contenus dans l'image cliquable. Chaque lien est étiqueté par le texte alt du area contenu dans l'image cliquable. Sans le texte alt, Lynx affiche le lien brut de chaque zone area, ce qui peut être incompréhensible.

    Si Leslie n'affiche pas le texte alt de son image cliquable, c'est le lien que Marc devrait voir au bas de sa page d'accueil :

    [USEMAP:hpfooter.gif]

    En suivant ce lien, Marc arrivera à une page qui liste tous les liens dans la carte cliquable. Sans les textes alt, Lynx pourra uniquement afficher chaque URL, ce qui ressemblera à ceci : 

    [USEMAP:hpfooter.gif]

MAP: http://leslie.harpold.com/#Map

    1. http://leslie.harpold.com/archives.html
    2. http://leslie.harpold.com/category/
    3. http://leslie.harpold.com/links.html
    4. http://leslie.harpold.com/leslie.html
    5. http://www.moveabletype.org

    Cependant, en vrai, Leslie a effectivement les textes alt appropriés pour son image et chaque zone de son image. Donc c'est le lien que Marc voit vraiment au bas de sa page d'accueil :

    Liens de navigation du site

    Suivre ce lien dirige Marc vers une page qui ressemble à ceci :

    Site navigation links

MAP: http://leslie.harpold.com/#Map

    1. previously...
    2. by category
    3. about the site
    4. about leslie
    5. Powered by Movable Type
  2. Michel en bénéficie. Links affiche le texte alt de l'image comme un lien. Quand Michel tape ENTER, Links affiche un menu de tous les liens définis dans la carte. Chaque lien est étiqueté par le texte alt text of the area. Sans le texte alt, Links affiche l'adresse de chaque area, ce qui peut être incompréhensible.
  3. Jackie en bénéficie. JAWS lira le texte alt de chaque area de l'image cliquable, dans l'ordre dans lequel c'est définit dans le source HTML. Jackie peut taper ENTER pour suivre le lien. Sans le texte alt, JAWS lit l'adresse du lien de chaque area, ce qui est très certainement incompréhensible. (Avez-vous déjà essayé de donner une longue adresse de sites Web au téléphone ?)
  4. Liliane en bénéficie. Internet Explorer affiche une bulle quand vous passez au-dessus de chaque area lié dans l'image cliquable.
  5. Google en bénéficie. Le moteur Google indexe le texte alt de la page principale et chaque area à l'intérieur de la carte cliquable. Le texte alt est un facteur dans la détermination de la pertinence de votre page relativement au mots clés contenu dans le texte alt de cet area.

Comment le réaliser ?

Si vous avez une image cliquable comme celle-ci :

<img src="footer.gif" width="500" height="212" usemap="#Map">

<map name="Map">
<area shape="rect" coords="203,114,258,129" href="/archives.html">
<area shape="rect" coords="277,113,348,129" href="/category/">
<area shape="rect" coords="364,113,401,128" href="links.html">
<area shape="rect" coords="418,114,488,130" href="leslie.html">
<area shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>

Ajoutez le texte alt à l'image principale ainsi qu'à chaque area lié à l'intérieur de l'image cliquable, de cette façon :

<img alt="Liens de navigation du site" src="footer.gif" width="500" height="212" usemap="#Map">

<map name="Map">
<area alt="précédemment..." shape="rect" coords="203,114,258,129" href="/archives.html">
<area alt="par catégorie" shape="rect" coords="277,113,348,129" href="/category/">
<area alt="A propos du site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="Apropos de leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Propulsé par Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org">
</map>

Toutes les règles sur la manière d'écrire de bons textes alt pour les images s'appliquent également aux images cliquables. Vous pourriez également ajouter title="" à la balise <img> principale et à chaque <area> pour supprimer l'affichage de la bulle dans les navigateurs visuels.

Choses à ne pas faire

Ne créez pas d'images cliquables côté serveur, les images qui envoient vos coordonnées vers le serveur pour un traitement ultérieur. Celles-ci sont complètement inacessibles aux utilisateurs de JAWS comme Jackie, les utilisateurs de navigateurs texte seul comme Michel et Marc, les utilisateurs de claviers comme Guillaume et les moteurs de recherche comme Google. Si vous devez utiliser des images cliquables côté serveur, ajouter une barre de navigation texte seul en dessous qui inclue les vrais liens texte vers chacune des pages que vous pouvez accéder en cliquant sur l'image cliquable.

Approfondir

  • Leslie Harpold: The Historical Present. Leslie m'a Leslie kindly allowed me to use her weblog as the basis of today's example.

 
<< Jour 23 : Fournir des équivalents texte pour les images  Jour 25 : Utiliser des lignes horizontales (ou les simuler correctement) >>  Sommaire