Dans le présent chapitre notre mission va consister à rendre accessible les cartes cliquables côté client. On va leur attribuer un texte alternatif, et en va leur prévoir une navigation clavier.

• Attribut alt pour img et area

• Utilisation du texte alternatif par Lynx et Jaws

• L'attribut tabindex (Ordre des tabulations)

• L'attribut accesskey (clé d'accès)

• Exemple d'une carte cliquable accessible

Tout comme les images simples, les cartes cliquables côté client doivent être pourvues d'un texte alternatif qui substituera l'image dans les navigateurs texte-seul et les lecteurs d'écran afin de pouvoir naviguer aisément dans une image interactive. Une lecture du tutoriel images mapées est primordiale pour la bonne compréhension de ce chapitre.

Attribut alt pour img et area

Afin d'optimiser les images réactives pour une meilleur accessibilité vous devez spécifier un attribut alt pour les balises <img /> et <area /> :

• un texte alternatif pour la balise <img /> qui représente l'image découpée en zones réactives. ce premier texte alternatif doit résumer le contenu de l'image en une brève description ;
• un texte alternatif pour chaque balise <area /> qui représente les zones réactives de l'image. Le texte alternatif doit renseigner sur la cible des liens associés aux zones réactives.

Utilisation du texte alternatif par Lynx et Jaws

• en fournissant un texte alternatif pour les balises <img /> et <area />, les navigateurs texte-seul l'utilisent pour substituer l'image et étiqueter les liens des différentes régions interactives.

  Par exemple Lynx affiche le texte alternatif de l'image sous forme de lien, lorsque le lecteur active le lien, Lynx affiche une nouvelle page qui énumère les liens associés aux zones réactives, ces liens sont représentés par les textes alternatifs des balises <area />.

  Sans le texte alternatif, il sera difficile de naviguer dans une image réactive, car Lynx affiche l'URL spécifiée dans l'attribut href des balises <area /> ce qui peut gêner la navigation.

• les lecteurs d'écran profitent aussi de l'attribut alt, au lieu de lire les URL des liens, Jaws lit le texte alternatif de chaque zone réactive dans l'ordre d'apparition des balises area dans le code XHTML.

L'attribut tabindex (Ordre des tabulations)

La touche Tab permet de déplacer le focus sur certains éléments de la page (les liens textuels, les images cliquables, les zones réactives des cartes cliquables, les éléments de formulaires et certains éléments de l'interface : barre d'adresse etc.), ce qui vous permet de naviguer sans l'utilisation de la souris grâce à la touche Tab

Lorsque vous atterrissez sur un élément de votre choix vous pouvez y effectuer une action (liens : exécuter avec la touche Entrée, éléments d'un formulaire : taper du texte, cocher, sélectionner etc.). L'attribut "tabindex" permet d'attribuer l'ordre de recherche par la touche tabulation aux liens et éléments du formulaire.

La touche Tab permet de se rendre à l'élément suivant, Tab + MAJ (Shift) permet de revenir à l'élément précédent. Par défaut l'ordre de tabulation est défini par l'ordre d'apparition des éléments (liens et éléments de formulaires) dans le code xhtml, cependant vous pouvez changer ce réglage par défaut grâce à l'attribut "tabindex" auquel vous devez spécifier une valeur allant de 0 à 32767, lorsque vous cliquez sur la touche Tab, le navigateur va donner la priorité à l'élément ayant le "tabindex" le plus faible et ainsi de suite.

Vous n'êtes pas obligé de donner des valeurs successives comme : 1, 2, 3 etc. mais vous pouvez aussi mettre 10, 20, 30 etc. ou bien 100, 200, 300 etc. l'essentiel c'est d'éviter les doublons et les valeurs qui ne figurent pas dans l'intervalle autorisé [0-32767]. Pensez à mettre des valeurs qui ne se suivent pas comme 10, 20, 30 etc. pour faciliter l'ajout potentiel d'un autre élément (vous n'aurez pas de problèmes lorsque vous allez lui attribuer un "tabindex" car vous aurez un large choix entre par exemple 10 et 20 ou entre 20 et 30 mais imaginez vous si vous vous êtes basé sur une numérotation de 1, 2, 3).

Si deux éléments ont le même "tabindex" le premier dans le flux xhtml sera activé en premier lieu.
D'autres éléments externes au canevas (domaine d'affichage) peuvent être activés par la touche Tab par exemple la barre d'adresse (ça diffère d'un navigateur à un autre).

N'oubliez pas que les éléments du formulaire (zone de texte, cases à cocher, liste déroulante etc.) sont aussi pris en compte. Lorsque vous atterrissez dans le lien voulu appuyer sur la touche "Entrée" pour l'exécuter.

L'attribut accesskey (clé d'accès)

L'attribut "accesskey" (touche de raccourci) nous permet d'activer les liens des différentes régions sans recourir à la souris ni à la recherche par tabulateur (la touche Tab). Cet attribut doit recevoir comme valeur la touche du clavier qui, combinée à une ou deux autres touches (selon le navigateur) servira de raccourci. Les touches complémentaires à la clé d'accès selon les navigateurs :

• ALT + accesskey : sous Internet Explorer 6 et 7, la combinaison "ALT + accesskey" permet de placer le focus sur le lien en question, il ne reste plus qu'à appuyer sur la touche "Entrée" pour exécuter le lien.
• Shift + ALT + accesskey : sous Firefox, Netscape, Mozilla, K-Meleon et Safari.
• Shift + Esc (escape : échapper) : sous Opera, cela va afficher une petite fenêtre qui contient tous les raccourcis définis dans la page ainsi que les URL qui lui sont associées, cliquez sur l'un de ces raccourcis pour exécuter le lien.

Il faut éviter les raccourcis qui sont déjà réservés à d'autres directives. Par exemple pour tous les navigateurs la combinaison "ALT + F" permet de faire dérouler le menu fichier (file), si vous mettez dans votre lien accesskey="F", ça va écraser la directive inhérente à la combinaison "ALT + F" (dérouler le menu fichier). Ceci pourra être évité pour les navigateurs "Firefox" et "Opera" mais pas pour Internet Explorer 6 et 7 et Netscape car ils font appelle à la touche "Alt" plus la touche de raccourci pour exécuter le lien.

Notez que la valeur de "accesskey" est insensible à la casse : que vous mettez accesskey="a" ou accesskey="A" ça change rien.

Voici un petit exemple :

<a href="http://www.monSite.com/help.html" accesskey="h" />page d'aide</a>

Exemple d'une carte cliquable accessible

Code XHTML

<map name="carte" alt="images réactives">
<area shape="rect"  coords="13,25,74,67" href="rectangle.html"
  alt="carré" tabindex="10" accesskey="a" />
<area shape="circle"  coords="163,93,33" href="cercle.html"
  alt="cercle" tabindex="20" accesskey="b" />
<area shape="poly"  coords="37,132,14,160,37,194,76,182,76,141" href="5segments.html"
  alt="polygone à cinq côtés" tabindex="30" accesskey="c" />
<area shape="poly"  coords="196,198,140,197,139,209,197,210,194,223,217,204,194,184"
  alt="flèche" tabindex="40" accesskey="d"  href="flèche.html" />
</map>
<img src="../images/bazar/map.jpg" usemap="#carte" />

Aperçu

Essayez d'explorer cette image avec votre clavier soit par la technique des raccourcis ou par la touche tabulation. Vous allez voir que c'est assez accessible surtout pour quelqu'un qui s'est fait manger la souris par un chat

Le prochain chapitre sera dédié aux cartes cliquables côté serveur, qui sont en voie de disparition en vue de leurs points faibles. En fait elles ne supportent pas les attributs : alt, tabindex et accesskey, ce qui fait qu'elles sont inaccessibles et doivent par voie de conséquence être évitées à tout prix.