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 lienA
et l'attributALT
de l'imageIMG
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}}
[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}}
Si texte
n'est pas renseigné:
{{Utilisateur:Lgd/test imagemap/Lien sur icône|image=Disambig colour.svg|largeur=17px|lien=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
[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)