retour vers le site AccessiWeb

Guide AccessiWeb

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

Critère 1.8 : Pour chaque image réactive, les zones cliquables sont-elles ordonnées de manière pertinente dans le code source ?

revenir en haut de la page

Carte d'identité du critère 1.8 [niveau AccessiWeb : Or]

Test(s) AccessiWeb permettant de vérifier le critère 1.8

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

  • Test 1.8.a [Or] : Pour chaque image réactive (balise img ou object avec l'attribut usemap), les zones cliquables (balises area) sont-elles ordonnées de manière pertinente dans le code source ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les zones cliquables d'une image réactive doivent être ordonnées dans le code source d'une manière pertinente par rapport au contexte dans lequel l'image réactive se trouve. Exemple : les zones réactives de la carte des départements français peuvent être ordonnées soit de manière alphabétique, soit par code postal... mais aussi d'une manière dépendante d'une information spécifique comme un circuit touristique, les étapes du Tour de France... L'internaute doit être informé de la manière dont les zones cliquables sont ordonnées.

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

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>) :
      • 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>


  2. Appliquer le(s) test(s) suivant(s) :
    • Test 1.8.a [Or] : Pour chaque image réactive (balise img ou object avec l'attribut usemap), les zones cliquables (balises area) sont-elles ordonnées de manière pertinente dans le code source ?

  3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.


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.8.a [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Images" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir les images map [nouvelle fenêtre]"
  3. Chaque images réactive s'affiche avec la liste de ses balises area
  4. Pour chaque image réactive, vérifier que les zones cliquables (balise area) sont ordonnées de manière pertinente.
  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.8.a [Or] :
  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 pour chaque image réactive, les zones cliquables (balise area) sont ordonnées de manière pertinente.
  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

Syntaxe générale :

<!-- déclaration de l'image supportant les zones réactives.
L'attribut usemap permet de relier l'image à la balise <code class="elt">map</code> 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" title="zone1" shape="[...]" coords="[...]" />
<area alt="zone2" title="zone2" shape="[...]" coords="[...]" />
...
</map>

Dans les balises area, considérer les attributs alt et title qu'il est conseillé de renseigner à l'identique pour une balise area donnée. Trier logiquement les valeurs de ces attributs : c'est-à-dire par classement alphabétique, chronologique, ou dans un ordre qui puisse être découvert "mot à mot" par l'utilisateur de façon cohérente.
Si l'ensemble des attributs alt et title ne peut suivre une structure linéaire satisfaisante, l'ordre alphabétique reste convenable.
Coder ensuite les balises area en suivant l'ordre ainsi déterminé.

Exemple de mauvaise pratique

Ce premier exemple est celui d'un plan d'une habitation pour lequel les différentes zones, lors d'une lecture linéaire, ne sont pas présentées selon l'ordre de déplacement logique dans une maison. Ici, on entre dans la chambre avant même d'être passé par l'entrée et l'anti-chambre.

<!-- Exemple de code pour une image présentant le plan d'une habitation -->

<img src="maison.jpg" alt="Plan de l'habitation" width="479" height="246" border="0" usemap="#plan" />
<map name="plan">
<area shape="rect" coords="100,200,200,100" href="#" alt="Chambre" title="Chambre" />
<area shape="rect" coords="0,100,100,0" href="#" alt="Entrée" title="Entrée" />
<area shape="rect" coords="100,100,200,0" href="#" alt="Antichambre" title="Antichambre" />
</map>

Voici un autre exemple, plus fréquemment rencontré sur Internet. Prenons simplement l'exemple d'une carte de la région Rhône-Alpes. Le code suivant présente une suite de départements sans ordre logique.

<html>
<head>
<title>images map mal ordonnées</title>
</head>
<body>
<img src="../cartes/mini_carte.gif" style="width:120px;height:109px;border:0" usemap="#mini_carte" alt="carte de la région Rhône-Alpes par départements" />
<map name="mini_carte" title="mini carte de la région rhône-Alpes">
<area shape="circle" coords="37,33,8" href="affiche_rub.php?rub=$rub&dep=69" alt="département 69" />
<area shape="circle" coords="25,38,8" href="affiche_rub.php?rub=$rub&dep=42" alt="Département 42" />
<area shape="circle" coords="33,79,10" href=" affiche_rub.php?rub=$rub&dep=07" alt="Département 07" />
</map>
</body>
</html>

Exemple de bonne pratique

Ceci reprend l'exemple du plan d'habitation où l'on passe d'abord par l'entrée et l'anti-chambre avant d'arriver dans la chambre.

<!-- Exemple de code pour une image présentant le plan d'une habitation -->

<img src="maison.jpg" alt="Plan de l'habitation" width="479" height="246" border="0" usemap="#plan" />
<map name="plan">
<area shape="rect" coords="0,100,100,0" href="#" alt="Entrée" title="Entrée" />
<area shape="rect" coords="100,100,200,0" href="#" alt="Antichambre" title="Antichambre" />
<area shape="rect" coords="100,200,200,100" href="#" alt="Chambre" title="Chambre" />
</map>

En reprenant le second exemple, il semble plus logique de classer les départements par ordre alphabétique :

<html>
<head>
<title>images map bien ordonnées</title>
</head>
<body>
<img src="../cartes/mini_carte.gif" style="width:120px;height:109px;border:0" usemap="#mini_carte" alt="carte de la région Rhône-Alpes par départements" />
<map name="mini_carte" title="mini carte de la région rhône-Alpes">
<area shape="circle" coords="33,79,10" href="affiche_rub.php?rub=$rub&dep=07" alt="Département de l'Ardèche (07)" />
<area shape="circle" coords="25,38,8" href="affiche_rub.php?rub=$rub&dep=42" alt="Département de la Loire (42)" />
<area shape="circle" coords="37,33,8" href="affiche_rub.php?rub=$rub&dep=69" alt="Département du Rhône (69)" />
</map>
</body>
</html>

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.


Zones sensibles non ordonnées d'une image réactive sur Lynx

Cette illustration est basée sur une carte de la région Rhône-Alpes. L'image représente la capture d'écran des zones sensibles d'une image réactive interprétée par Lynx. Ces zones, correspondant aux balises area, n'ont pas été ordonnées de manière logique. Lynx les présente donc sous la forme d'une liste de liens dans laquelle il est difficile de s'y repérer : Département 69 Département 42 Département 07.

Zones sensibles ordonnées d'une image réactive sur Lynx

Cette illustration est basée sur une carte de la région Rhône-Alpes. L'image représente la capture d'écran des zones sensibles d'une image réactive interprétée par Lynx. Ces zones, correspondant aux balises area, ont été ordonnées de manière logique. Cela a également comme effet bénéfique d'inviter à préciser et à expliciter la rédaction des commentaires alternatifs. Lynx les présente donc sous la forme d'une liste de liens explicites dans laquelle il est aisé de s'y repérer : Département de l'Ardèche (07) Département de la Loire (42) Département du Rhône (69).

revenir en haut de la page

Références

revenir en haut de la page

Fiche précédente : fiche du critère 1.7 Fiche suivante : fiche du critère 1.9

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.