Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Images > Critère 1.7

Critère 1.7 : Pour chaque image réactive, les zones cliquables sont-elles définies juste après la déclaration de l'image dans le code source ?

revenir en haut de la page

Carte d'identité du critère 1.7 [niveau AccessiWeb : Bronze]

revenir en haut de la page

Comprendre

Comprendre le critère

• Toutes les zones cliquables côté client (balises area contenues dans la balise map) d'une image réactive doivent être définies juste après la déclaration de l'image dans le code source. La technologie des images réactives côté client est à privilégier par rapport à celle côté serveur.
• Tous les liens alternatifs aux zones cliquables côté serveur doivent être définis juste après la déclaration de l'image dans le code source.

Bénéfices pour les utilisateurs

• Les internautes aveugles utilisent généralement, pour naviguer, un lecteur d'écran ou un navigateur vocal qui ont la particularité de restituer l'information dans l'ordre dans lequel elle est inscrite dans le code source. C'est ce qu'on désigne par le terme de "lecture linéaire". Dans certains cas les zones cliquables d'une image réactive ne sont pas codées immédiatement après la déclaration de l'image, mais plus loin dans le code, voire à la fin de la page. Un utilisateur aveugle, parcourant linéairement la page, lira d'abord le commentaire général de l'image réactive, puis il lira le contenu de la page et enfin les commentaires associés aux zones cliquables (balises area). L'accès linéaire à l'information provoque une rupture logique et ne permet pas à l'utilisateur de relier l'élément graphique principal aux zones cliquables qui lui sont associées. Ceci peut s'avérer d'autant plus inintelligible si la page comporte plusieurs déclarations d'images réactives dissociées de leurs zones cliquables. Si le critère est respecté, l'utilisateur associera plus facilement l'image réactive et les zones qui la composent et ne risque pas d'être dérouté si la page contient plusieurs images cliquables.

Valeur ajoutée pour le site

• La maintenance et la mise à jour de données contenues dans l'image réactive sont beaucoup plus aisées car la lecture du code est facilitée par le regroupement des informations ayant un rapport direct entre elles.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester :
   • Identifier dans un navigateur graphique toutes les images réactives.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <map> <area href="page.html" coords="..." shape="..." alt="alternative textuelle à l'image" /> </map>) :
     • zones cliquables côté client :
       • balise img ou balise object avec l'attribut usemap
       • balise map avec l'attribut name (contenu identique à celui de l'attribut usemap)
       • balises area contenues entre les balises <map name=[...]> et </map>
     • zones cliquables côté serveur :
       • balise img avec l'attribut ismap
       • balise a avec l'attribut href
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 1.7.a [Bronze] : Pour chaque image réactive (balise img ou object avec l'attribut usemap), les zones cliquables (balises area contenues dans la balise map) sont-elles définies juste après la déclaration de l'image dans le code source ?
   • Test 1.7.b [Bronze] : Pour chaque image réactive côté serveur (balise img avec l'attribut ismap), les zones cliquables sont-elles doublées de liens texte juste après la déclaration de l'image dans le code source ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la Barre d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 1.7.a [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le code source généré"
3. Rechercher dans le code source chaque balise map
4. Pour chaque balise map, vérifier que les zones cliquables (balises area contenues dans la balise map) sont définies juste après la déclaration de l'image.
5. Si c'est le cas, le test est validé.


• Pour le test 1.7.b [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le code source généré"
  3. Rechercher dans le code source les balises img qui contiennent l'attribut ismap
  4. Vérifier que les zones cliquables sont doublées de liens texte juste après la déclaration de l'image.
  5. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 1.7.a [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  3. Une nouvelle fenêtre apparaît contenant le code source de la page.
  4. En faisant une recherche sur le mot area (ctrl + f), vérifier que les zones cliquables sont définies juste après la déclaration de l'image dans le code source.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 1.7.b [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot ismap (ctrl + f), vérifier que les zones cliquables sont doublées de liens texte juste après la déclaration de l'image.
5. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

Le développeur doit veiller au respect de ce critère.

Implémentation

Une image réactive se compose de deux parties. Une première partie constituée par l'image en elle-même, caractérisée par la balise img et une seconde partie constituée par des zones cliquables situées entre les balises ouvrantes et fermantes map. Il est impératif de ne pas séparer ces deux parties afin de permettre une bonne cohérence de l'ensemble de l'image.
Syntaxe générale :

<!-- déclaration de l'image supportant les zones cliquables.
L'attribut usemap permet de relier l'image à la balise map ayant le même nom -->
<img alt="image_principale" usemap="#map_name" src="[...]" />
<map name="map_name">
<!-- définition des zones réactives de l'image -->
<area alt="zone1" shape="[...]" coords="[...]" />
<area alt="zone2" shape="[...]" coords="[...]" />
...
</map>

Exemple de mauvaise pratique

Dans l'exemple qui suit, l'image principale est déclarée au début du code source, mais les zones cliquables sont reportées à la fin du code. Entre les deux, le contenu peut s'étendre sur plusieurs pages écran.

<html>
<head>
<title>image map dissociée des zones réactives</title>
</head>
<body>
<img src="carte_geo.gif" style="width:120px;height:109px;border:0" usemap="#carte_geo" alt="carte de la région Rhône-Alpes" />
...
[Contenu de la page pouvant comprendre des titres, d'autres éléments graphiques, du texte sur plusieurs pages écran]
...

<map name="carte_geo">
<area shape="circle" coords="37,33,8" href="departement_69.html" alt="département du rhône (69)" />
<area shape="circle" coords="25,38,8" href="departement_42.html" alt="département de la loire (42)" />
<area shape="circle" coords="33,79,10" href="departement_07.html" alt="département de l'ardèche (07)" />
</map>
</body>
</html>

Exemple de bonne pratique

Ici, la déclaration de l'image principale précède immédiatement celle des zones cliquables.

<img src="carte_geo.gif" style="width:120px;height:109px;border:0" usemap="#carte_geo" alt="carte de la région Rhône-Alpes" />
<map name="carte_geo">
<area shape="circle" coords="37,33,8" href="departement_69.html" alt="département du rhône (69)" />
<area shape="circle" coords="25,38,8" href="departement_42.html" alt="département de la loire (42)" />
<area shape="circle" coords="33,79,10" href="departement_07.html" alt="département de l'ardèche (07)" />
</map>

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

Jaws lisant une zone cliquable dissociée des images maps (format mp3, 129 ko)

Jaws lisant une zone cliquable rattachée aux images map (format mp3, 76 ko)

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 7.4) : Image maps
• WAI Curriculum : Provide redundant text links for each active region of a server-side image map
• WAI Curriculum : a text equivalent for image map regions
• Plongez dans l'accessibilité : Fournir des équivalents texte pour les images cliquables

revenir en haut de la page