# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

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

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

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 :

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

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

- Fiche 9.3 : Y a-t-il un plan du site ?
- Fiche 9.4 : Y a-t-il une page d'aide expliquant les principes de navigation à l'intérieur du site ?
- Fiche 9.5 : A partir de n'importe quelle page du site, la page d'aide est-elle atteignable de manière identique ?
- Fiche 9.7 : A partir de n'importe quelle page du site, le moteur de recherche est-il atteignable de manière identique ?
- Fiche 12.4 : Y a-t-il des liens facilitant la navigation dans la page ?
- Fiche 12.6 : Si des raccourcis clavier ont été définis dans le site, sont-ils actifs dans la page ?

#### Autres ressources

- html specifications : Forms in html documents : accesskey
- html techniques (section 6.3) : Keyboard access
- html techniques (section 11.1) : Keyboard access to forms
- Plongez dans l'accessibilité (jour 15) : Définir des raccourcis clavier
- J. Korpela : Using accesskey attribute in HTML forms and links

revenir au sommaire de la fiche

revenir en haut de la page

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