retour vers le site AccessiWeb

Guide AccessiWeb


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

Fiche 12.6 : Si des raccourcis clavier ont été définis dans le site, sont-ils actifs dans la page ?

Carte d'identité

  • Critère AccessiWeb : 12.6
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 13.4

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

  1. Pour chaque lien important du site, vérifier qu'il possède l'attribut accesskey et que sa valeur est correcte.

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.6.
  3. Si des raccourcis claviers sont codés dans la page, ils sont affichés dans la page.
  4. Tester le fonctionnement de chacun des raccourcis clavier en effectuant les combinaisons adéquates. Avec Internet Explorer, faites alt+shift+[caractère], puis valider. Avec Firefox, il suffit simplement d'effectuer la combinaison alt+shift+[caractère].
    Note : Si une page d'aide existe, prendre connaissance des raccourcis clavier qui sont listés et utilisés sur le site. Vérifier page après page que les raccourcis clavier annoncés sont tous actifs et que d'autres raccourcis clavier ne sont pas utilisés dans les pages sans être annoncés dans 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" pour prendre connaissance des raccourcis clavier qui sont utilisés sur la page.
  2. Avec un navigateur graphique : tester le fonctionnement de chacun des raccourcis clavier en effectuant les combinaisons adéquates. Avec Internet Explorer, faites alt+shift+[caractère], puis valider. Avec Firefox, il suffit simplement d'effectuer la combinaison alt+shift+[caractère].
    Note : Si une page d'aide existe, prendre connaissance des raccourcis clavier qui sont listés et utilisés sur le site. Vérifier page après page que les raccourcis clavier annoncés sont tous actifs et que d'autres raccourcis clavier ne sont pas utilisés dans les pages sans être annoncés dans 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. Avec un navigateur graphique : tester le fonctionnement de chacun des raccourcis clavier en effectuant les combinaisons adéquates. Avec Internet Explorer, faites alt+shift+[caractère], puis valider. Avec Firefox, il suffit simplement d'effectuer la combinaison alt+[caractère].
    Note : Si une page d'aide existe, prendre connaissance des raccourcis clavier qui sont listés et utilisés sur le site.
    Vérifier page après page que les raccourcis clavier annoncés sont tous actifs et que d'autres raccourcis clavier ne sont pas utilisés dans les pages sans être annoncés dans 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.
  3. Activer le raccourci clavier avec la touche Alt et le caractère, appuyer sur entrée, et vérifier que le raccourci clavier fonctionne.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Ce critère est implémenté par le développeur HTML.

Implémentation

Veiller à attribuer les mêmes raccourcis clavier aux liens les plus importants de la page sur toutes les pages du site.
L'association d'un raccourci clavier à un lien se fait par l'intermédiaire de l'attribut accesskey auquel on donne une valeur qui est un caractère alphanumérique :

<a [...] accesskey="[un caractère]>mon joli lien</a>

Remarque : bien que tous les caractères soient utilisables, il est conseillé de n'utiliser que des chiffres pour ne pas créer de conflits avec les raccourcis du navigateur ou de l'aide technique de l'utilisateur. En effet, sous certains navigateurs, l'utilisation du raccourci clavier consiste à combiner la touche alt avec le caractère désigné. Par exemple, si l'attribut accesskey a pour valeur la lettre A, le lien auquel est associé ce raccourci s'active par alt+a.
Or, les menus du type "Fichier", Edition, Affichage", s'activent souvent par la combinaison de la touche alt et de la première lettre du nom de menu. Par exemple, alt+a active le menu "affichage".

Exemple de mauvaise pratique

Imaginons le site suivant :

Le code correspondant est le suivant :

<a href="#contenu" accesskey="s">passer le menu</a>
<a href [...] accesskey="a">accueil</a>
<a href [...] >plan du site</a>
<a href [...]>moteur de recherche</a>
<a href [...] accesskey="">contacts</a>
<a href [...]>liste des raccourcis clavier</a>

A la lecture de ce code, on constate que la lettre "a" a été attribuée au lien "accueil", ce qui risque de provoquer des conflits avec un éventuel raccourci du navigateur ou de l'aide technique de l'utilisateur. les autres liens n'ont pas de raccourci, ou une valeur nulle.

Exemple de bonne pratique

En reprenant l'exemple précédent, le code correct est le suivant :

<a href="#contenu" accesskey="s">passer le menu</a>
<a href [...] accesskey="1">accueil</a>
<a href [...] accesskey="3">plan du site</a>
<a href [...] accesskey="4">moteur de recherche</a>
<a href [...] accesskey="7">contacts</a>
<a href [...] accesskey="0">liste des raccourcis clavier</a>

Les liens principaux ont un raccourci clavier. Les caractères choisis sont des chiffres, à l'exception du lien interne "passer le menu".

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

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.5 Fiche suivante : fiche 12.7

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