retour vers le site AccessiWeb

Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Navigation > Critère 12.4

Critère 12.4 : Dans chaque page Web, chaque raccourci clavier obligatoire est-il présent ?

revenir en haut de la page

Carte d'identité du critère 12.4 [niveau AccessiWeb : Or]

Test(s) AccessiWeb permettant de vérifier le critère 12.4

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les raccourcis clavier obligatoires doivent être présents dans chaque page d'un site Web.

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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

  1. Sélectionner le(s) élément(s) à tester : Ouvrir le code source des pages Web du site et sélectionner le code associé à tous les éléments suivants : attribut accesskey (exemple de code source : <a href="nomdusite.fr" accesskey="1">Retour à la page d'accueil du site nomdusite.fr</a>).

  2. Appliquer le(s) test(s) suivant(s) :
  3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.


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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :
  • Pour le test 12.4.a [Or] :
    1. Sous Internet Explorer, ouvrir la page à analyser.
    2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les raccourcis clavier"
    3. Le texte "Accesskey ([valeur du raccourci clavier])" précède chacun des raccourcis clavier de la page Web.
    4. Vérifier que pour chaque page Web, chaque raccourci clavier obligatoire (attribut accesskey) est présent
    5. Si c'est le cas, le test est validé.

    Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :
  • Pour le test 12.4.a [Or] :
    1. Sous Firefox, ouvrir la page à analyser.
    2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les Accesskeys".
    3. Le texte "Accesskey=[valeur du raccourci clavier]" précède chacun des raccourcis clavier de la page Web.
    4. Vérifier que pour chaque page Web, chaque raccourci clavier obligatoire (attribut accesskey) est présent.
    5. Si c'est le cas, le test est validé.

    revenir en haut de la page

    Comment mettre en oeuvre

    Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.


    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", "section décrivant l'accessibilité du site", "moteur de recherche", "contacts".

    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

    Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.


    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.

    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.

    revenir en haut de la page

    Références

    revenir en haut de la page

    Fiche précédente : fiche du critère 12.3 Fiche suivante : fiche du critère 13.1

    • Guide AccessiWeb (version 3.1, 2 mars 2009) | Conditions d'utilisation | Contact
    Copyright © 2009 Association BrailleNet. Tous droits Réservés.