Utilisateur:Lgd/test imagemap

Un article de Wikipédia, l'encyclopédie libre.

Sommaire

[modifier] {{Lien sur icône}}

priorité: élevée. Niveau A

Le modèle actuel {{Lien sur icône}} utilise l'extension imagemap pour produire une image-lien (nette amélioration par rapport au bricolage CSS antérieur). Mais le modèle ne génère pas l'alternative textuelle de l'image : le lien ne sera pas perceptible ou compréhensible dans certaines aides techniques, puisqu'il a un contenu vide (malgré la présence du title du lien). Cas-type de tests: Navigateur texte Lynx, navigateur graphique avec désactivation des images (RGAA 1.1.1 et 13.1.4).

D'une manière générale, pour toute image-lien (lien dont le contenu est uniquement une image):

  • L'attribut ALT de l'image doit être présent et ne peut pas être vide.
  • L'attribut title du lien peut être absent.
  • S'ils sont tous deux présents, l'attribut title du lien A et l'attribut ALT de l'image IMG doivent être identiques ou du moins donner une information équivalente.

[modifier] Code actuel

{{#tag:ImageMap|
Image:{{{image|Defaut.svg}}}{{!}}{{{largeur|25px}}}
default [[{{{lien|{{PAGENAME}}}}}|{{{texte|{{{lien|{{PAGENAME}}}}}}}}]]
desc none}}


[modifier] Exemple de rendu

{{Lien sur icône|image=Disambig colour.svg|largeur=17px|lien=Aide:Homonymie}}
Aide:Homonymie

[modifier] Code généré

<div style="position: relative;">
  <a href="/wiki/Aide:Homonymie"
   title="Aide:Homonymie">
    <img alt=""
      src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Disambig_colour.svg/17px-Disambig_colour.svg.png"
      width="17"
      height="13"
      border="0" />
  </a>
</div>

[modifier] Code amélioré

Test de correction du modèle!: /Lien sur icône

{{#tag:ImageMap|
Image:{{{image|Defaut.svg}}}{{!}}{{{largeur|25px}}}{{!}}{{{texte|{{{lien}}}}}}
default [[{{{lien|{{PAGENAME}}}}}|{{{texte|{{{lien|{{PAGENAME}}}}}}}}]]
desc none}}


[modifier] Exemples de rendu

{{Utilisateur:Lgd/test imagemap/Lien sur icône|image=Disambig colour.svg|largeur=17px|lien=Aide:Homonymie|texte=Aide Homonymie}}
Aide Homonymie}

Si texte n'est pas renseigné:

{{Utilisateur:Lgd/test imagemap/Lien sur icône|image=Disambig colour.svg|largeur=17px|lien=Aide:Homonymie}}
Aide:Homonymie}

[modifier] Code généré

<div style="position: relative;">
  <a href="/wiki/Aide:Homonymie"
   title="Aide Homonymie">
    <img alt="Aide Homonymie"
     src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Disambig_colour.svg/17px-Disambig_colour.svg.png"
     width="17"
     height="13"
     border="0" />
  </a>
</div>

Si texte n'est pas renseigné, alt reprend le titre de la page cible.

[modifier] extension imagemap avec zones cliquables

priorité: élevée. Niveau AA.

Le paramètre default ne doit pas être utilisé dans le cas d'une image MAP classique avec plusieurs zones cliquables : il est inutile pour le résultat attendu, mais génère une structure HTML aberrante problématique pour l'accessibilité.

[modifier] Syntaxe problématique

<imagemap>
Image:Cognac france map-fr.svg|300px|Carte des cognacs
rect 500 30 30 300 [[La Rochelle]]
circle 700 550 100 [[Angoulême]]
circle 499 425 50 [[Cognac (Charente)]]
default [[Cognac (eau-de-vie)]]
desc bottom-right
</imagemap>


[modifier] rendu de la syntaxe problématique

La Rochelle Angoulême Cognac (Charente)

Carte des cognacsÀ propos de cette image

[modifier] code généré par la syntaxe problématique

<p>
  <map name="ImageMap_1" id="ImageMap_1">
    <area href="/wiki/La_Rochelle"
     shape="rect"
     coords="150,9,9,90"
     alt="La Rochelle" title="La Rochelle" />
    <area href="/wiki/Angoul%C3%AAme"
     shape="circle"
     coords="210,165,30"
     alt="Angoulême" title="Angoulême" />
    <area href="/wiki/Cognac_%28Charente%29"
     shape="circle"
     coords="150,128,15"
     alt="Cognac (Charente)" title="Cognac (Charente)" />
  </map>
</p>
<div style="position: relative;">
  <a href="/wiki/Cognac_%28eau-de-vie%29"
     title="Cognac (eau-de-vie)">
    <img alt="Carte des cognacs"
     src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Cognac_france_map-fr.svg/300px-Cognac_france_map-fr.svg.png"
     width="300"
     height="255"
     border="0"
     usemap="#ImageMap_1" />
  </a><a href="/wiki/Image:Cognac_france_map-fr.svg"
     title="À propos de cette image"
     style="position:absolute; top: 235px; left: 280px;">
     <img alt="À propos de cette image"
     src="/w/extensions/ImageMap/desc-20.png"
     style="border: none;" />
  </a>
</div>

[modifier] Points positifs

  • C'est une image cliquable côté client et non côté serveur (RGAA 9.1.1)
  • l'image a une alternative textuelle et celle-ci est potentiellement pertinente (RGAA 1.1.1)
  • chaque zone AREA a une alternative textuelle et celle-ci est potentiellement pertinente (RGAA 1.1.1 et 1.1.2)

[modifier] Points à améliorer

  • l'image est incluse dans un lien A, dont la présence n'est pas pertinente en HTML (incapacité de certaines aides techniques à restituer cette structure de manière pertinente, exemple de Lynx générant un [LINK] anonyme pour ce lien) (RGAA 3.2.4, mais à la limite du champ d'application)
  • ce lien et le lien suivants « à propos de cette image » sont strictement adjacents (absence d'espace significatif dans le code HTML); des aides techniques peuvent confondre les deux liens (rendu linéaire dans Jaws 8.0 par exemple) (RGAA 10.5.1)