retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Aide à la navigation > Fiche 12.5

Fiche 12.5 : Les liens importants du site comportent-ils des raccourcis claviers ?

Carte d'identité

  • Critère AccessiWeb : 12.5
  • Niveau AccessiWeb : or
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 9.5

revenir en haut de la page

Comprendre

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

Par le code source

Vérifier :

  1. La présence de l'attribut accesskey pour les éléments importants.
  2. La pertinence des signes choisis pour activer les raccourcis.
  3. La cohérence avec la page "liste des raccourcis claviers utilisés".
  4. La pertinence des éventuels raccourcis inhabituels.
  5. 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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "12. Aide à la navigation" de la Barre AccessiWeb, activer le critère 12.5.
  3. Si des raccourcis claviers sont codés dans la page, ils sont affichés dans la page.
  4. 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) :
  1. Cliquer sur le menu "Structure", puis sur l'option "Raccourcis clavier".
  2. La liste des raccourcis présents sur la page est affichée.
  3. 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) :
  1. Activer l'option "Afficher les AccessKeys" du menu "Information".
  2. Les raccourcis présents sur la page sont affichés dans un cadre de couleur jaune.
  3. 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) :
  1. 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).
  2. 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.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

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

Implémentation

Syntaxe générale :

  1. 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).
  2. 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>

  3. Raccourci associé à un champ de formulaire :

    <input type="type" accesskey="[caractère_alphanumérique]" />

    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 :

Il faut bien veiller à :

La liste suivante (UK Government accesskeys standard) est conseillée :

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 :

Dans les spécifications du HTML 4.01, les éléments suivants acceptent l'attribut accesskey (raccourci clavier) :

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

les raccourcis recommandés sur les liens :

<a href="index.php" accesskey="1">Accueil</a>
<a href="aide.html" accesskey="6">Page d'aide</a>
<a href="plan.html" accesskey="3">Plan du site</a>
<a href="rechercher.html" accesskey="4">Recherche</a>
<a href="glossaire.html" accesskey="5">Glossaire</a>
<a href="contact.html" accesskey="7">Contact</a>

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.

<form action="resultat-recherche.php" method="get">
<label for="cherch">Recherche :</label>
<input type="text" id="cherch" name="cherch" maxlength="250" value=" " accesskey="4" />
<input name="submit" type="submit" value="lancer la recherche" />
</form>

revenir en haut de la page

Illustrations

Les raccourcis clavier annoncés par Jaws (format mp3, 323 ko)

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.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 12.4 Fiche suivante : fiche 12.6

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact