Bénéfice 1 :
Les personnes qui ont des difficulté à utiliser la souris ou navigant avec un terminal ne disposant pas de souris peuvent activer les liens les plus importants du site par l'intermédiaire d'une combinaison de touches effectuée au clavier.
Bénéfice 2 :
les personnes aveugles pourront ainsi atteindre les liens les plus significatifs du site sans être obligées de passer en revue chaque élément de la page avec la touche tabulation.
Valeur ajoutée pour le site
Il n'y a pas d'élément d'information pour cette rubrique.
La présence de l'attribut accesskey pour les éléments importants.
La pertinence des signes choisis pour activer les raccourcis.
La cohérence avec la page "liste des raccourcis claviers utilisés".
La pertinence des éventuels raccourcis inhabituels.
En plus de l'analyse du code source, tester le fonctionnement de chaque raccourci avec un navigateur qui les supporte.
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 AccessiWeb (version 1.0) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "12. Aide à la navigation" de la Barre AccessiWeb, activer le critère 12.5.
Si des raccourcis claviers sont codés dans la page, ils sont affichés dans la page.
Vérifier la pertinence des raccourcis utilisés et leur cohérence par rapport à ceux annoncés sur la page d'aide.
Note : Pour enlever les raccourcis claviers de la page, recharger la page en cliquant sur la touche F5.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur le menu "Structure", puis sur l'option "Raccourcis clavier".
La liste des raccourcis présents sur la page est affichée.
Vérifier la pertinence des raccourcis utilisés et leur cohérence par rapport à ceux annoncés sur la page d'aide.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Activer l'option "Afficher les AccessKeys" du menu "Information".
Les raccourcis présents sur la page sont affichés dans un cadre de couleur jaune.
Vérifier la pertinence des raccourcis utilisés et leur cohérence par rapport à ceux annoncés sur la page d'aide.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
S'assurer que Jaws est configuré pour détecter et annoncer les raccourcis clavier associés aux liens (cf. section sur la configuration de Jaws).
Passer d'éléments actif en élément actif (tout élément supportant un raccourci clavier) avec la touche "tabulation". Si un raccourci clavier est associé à un élément, Jaws annonce la combinaison de touches correspondante après l'intitulé du lien.
Le développeur doit veiller au respect de ce critère.
Implémentation
Syntaxe générale :
Raccourci associé à un lien :
<a href=[adresse] accesskey="[caractère_alphanumérique]">intitulé du lien</a>
Soit l'appel du raccourci positionne le focus sur le lien, il faut ensuite valider pour suivre le lien (par exemple avec Internet Explorer), soit le lien est directement suivi (par exemple avec Firefox).
On peut aussi attribuer un raccourci clavier à un lien interne à la page, par exemple :
<a href="#contenu" accesskey="s">passer le menu</a> <ul> <li>item 1 du menu</li> <li>item 2 du menu</li> <li>item 3 du menu</li> </ul> <h1 id="contenu">...</h1> ou <a href="#" name="contenu" id="contenu">...</a>
On peut aussi associer le raccourci clavier à l'intitulé du champ, via la balise LABEL :
<label for="[id_champ]" accesskey="[caractère_alphanumérique]">intitulé du champ</label>
Voici quelques recommandations concernant l'usage des raccourcis clavier :
Les raccourcis claviers fonctionnent seulement pour certains navigateurs (Internet Explorer 4+ Windows, Firefox, 5+ Mac, Mozilla Windows-Linux, Netscape 6+ Windows, Opera 7 Windows-Linux).
Il y a de légères différences dans leurs modes d'exécution d'un navigateur à l'autre. Par exemple, sous Internet Explorer, il faut combiner la touche annoncée, avec les touches "alt" et "maj" (exemple : alt+maj+1), ce qui positionne le focus sur le lien. Il faut ensuite valider pour activer le lien. Tandis que sous Firefox, la combinaison de touches alt+maj+[caractère_alphanumérique] active directement le lien.
Les combinaisons de touches varient en fonction des configurations, par exemple : Windows : alt + maj + 4 ou alt + 4, Macintosh : ctrl + 4 ou pomme + 4.
Il n'y a pas de normalisation officielle du choix des raccourcis claviers (quel signe utiliser pour chaque fonction).
La majorité des plates-formes de consultation possèdent leurs propres raccourcis claviers. Ce qui peut provoquer des risque d'interférence.
Il faut bien veiller à :
Respecter le consensus le plus large et le plus récent, afin de ne pas désorienter les utilisateurs.
Eviter d'entrer en concurrence avec les raccourcis claviers intrinsèques à la plateforme de consultation. On utilisera de préférence un chiffre qu'une lettre. En effet, les combinaisons de type alt+maj+[lettre] sont très souvent attribuées à l'activation des menus du navigateur ou pour des fonctionnalités propres à l'aide technique.
La liste suivante (UK Government accesskeys standard) est conseillée :
"s" : passer le menu,
"1" : accueil,
"2" : actualités,
"3" : plan du site,
"4" : moteur de recherche,
"5" : FAQ,
"6" : aide,
"7" : contact,
"8" : conditions d'utilisation,
"0" : liste des raccourcis claviers utilisés dans le site,
Dont les plus importants sont : "accueil", "plan du site", "aide", "moteur de recherche", "contacts" et "liste des raccourcis claviers".
En ce qui concerne la concurrence entre les raccourcis claviers implémentés sur le site et ceux intrinsèques à la plate forme de consultation, il y a 2 types d'interactions :
Le raccourci du site prend le dessus (cas le plus problématique),
Le raccourci du site ne fonctionne pas (au détriment du raccourci applicatif).
Dans les spécifications du HTML 4.01, les éléments suivants acceptent l'attribut accesskey (raccourci clavier) :
A
AREA
BUTTON
INPUT
LABEL
LEGEND
TEXTAREA
Exemple de mauvaise pratique
La mauvaise pratique consiste soit à associer des raccourcis clavier à tous les liens d'une page, soit à s'éloigner des raccourcis en usage et communément admis. Si des lettres sont utilisées en guise de raccourci, il faut le faire avec une extrême prudence afin de ne pas créer de conflit avec les raccourcis proposés par les navigateurs et les aides techniques. Mauvais exemple N°1 :
<a href [...] accesskey="a">accueil</a>
Il y a risque de concurrence avec un raccourci-clavier du navigateur : c'est le menu « affichage » du navigateur qui s'ouvrirait, et non pas les raccourci clavier du lien qui serait activé.
Mauvais exemple N°2 :
<a href="plan.html" accesskey="4">Plan du site</a>
Le caractère 4 n'est pas recommandé pour "plan du site" mais pour "moteur de recherche".
Exemple de bonne pratique
Voici les cas les plus courants d'utilisation de raccourcis clavier :
Remarque : Avec Microsoft Internet Explorer l'appel du raccourci place le focus sur le lien, il faut ensuite appuyer sur "Entrée") pour suivre le lien. Tandis qu'avec Firefox le lien est directement suivi.
Lien interne à la page (passer le menu) :
<a href="#contenu" accesskey="s">passer le menu</a>
<ul> <li>item 1 du menu</li> <li>item 2 du menu</li> <li>item 3 du menu</li> </ul>
<h3 id="contenu">Contenu</h3> ...
Champ de formulaire
Le champ d'édition permettant de saisir des mots-clés est associé au raccourci "alt+maj+4".
Ceci place le curseur dans le champ d'édition.
Voici ce que lit Jaws lorsque l'utilisateur passe de lien en lien à l'aide de la touche "Tabulation" et que ces liens ont des raccourcis clavier associés.
"Lien : passer le menu alt S, Tab, accueil alt un lien. Tab, page d'aide alt six lien. Tab, plan du site alt trois lien. Tab, recherche alt quatre lien. Tab, glossaire alt cinq lien. Tab, contact alt 7 lien.
Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez
disposer d'un lecteur capable de lire ce type de fichier.
Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader.
Pour plus d'informations sur le
téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à
l'évaluation de ce guide.