Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 12.3 : Dans chaque page d'un ensemble de pages Web, chaque raccourci clavier défini pour cet ensemble de pages est-il implémenté de manière pertinente et identique ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les raccourcis clavier définis pour un ensemble de pages Web doivent être présents dans chaque page de cet ensemble. Ils doivent aussi être implémentés de manière pertinente et identique.

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Les personnes atteintes d'un handicap moteur qui les empêche d'utiliser la souris peuvent naviguer plus confortablement à l'aide de raccourcis clavier sur les principaux liens. Ceci leur permet de gagner du temps, plutôt que de passer de lien en lien avec la touche tabulation.
  
  
• Bénéfice 2 :
  Les personnes aveugles, qui lisent une page de manière linéaire, pourront atteindre plus rapidement un lien important ou habituel auquel est associé un raccourci.

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) :
   • Test 12.3.a [Or] : Dans chaque page d'un ensemble de pages Web, chaque raccourci clavier (attribut accesskey) défini pour cet ensemble de pages est-il présent ?
   • Test 12.3.b [Or] : Dans chaque page Web ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est-il implémenté de manière pertinente ?
   • Test 12.3.c [Or] : Dans chaque ensemble de pages Web, pour chaque page ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est-il implémenté de manière identique ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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.3.a [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Vérifier que la page analysée fait partie d'un ensemble de pages déterminé
  3. 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"
  4. Le texte "Accesskey ([valeur du raccourci clavier])" précède chacun des raccourcis clavier de la page Web.
  5. Vérifier que pour chaque page d'un ensemble de pages Web, chaque raccourci clavier (attribut accesskey) défini pour cet ensemble de pages est présent
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.3.b [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 ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est implémenté de manière pertinente
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.3.c [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Vérifier que la page analysée fait partie d'un ensemble de pages déterminé
  3. 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"
  4. Le texte "Accesskey ([valeur du raccourci clavier])" précède chacun des raccourcis clavier de la page Web.
  5. Vérifier que pour chaque page d'un ensemble de pages Web et ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est implémenté de manière identique
  6. 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.3.a [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Vérifier que la page analysée fait partie d'un ensemble de pages déterminé.
  3. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les Accesskeys".
  4. Le texte "Accesskey=[valeur du raccourci clavier]" précède chacun des raccourcis clavier de la page Web.
  5. Vérifier que pour chaque page d'un ensemble de pages Web, chaque raccourci clavier (attribut accesskey) défini pour cet ensemble de pages est présent.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.3.b [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 ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est implémenté de manière pertinente.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 12.3.c [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Vérifier que la page analysée fait partie d'un ensemble de pages déterminé
  3. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les Accesskeys".
  4. Le texte "Accesskey=[valeur du raccourci clavier]" précède chacun des raccourcis clavier de la page Web.
  5. Vérifier que pour chaque page d'un ensemble de pages Web et ayant des raccourcis clavier (attribut accesskey), chaque raccourci clavier est implémenté de manière identique.
  6. 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é ?

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 d'un même ensemble de pages d'un 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 :

• Aucune des pages du site ne pointe vers elle-même.
• Le formulaire du moteur de recherche est présent sur chaque page.
• L'adresse mail est présente sur chaque page dans un lien de messagerie.
• Les raccourcis claviers mentionnés dans la page "Liste des raccourcis claviers" sont :
  • "s" : passer le menu,
  • "1" : accueil,
  • "3" : plan du site,
  • "4" : moteur de recherche,
  • "7" : contact,
  • "0" : liste des raccourcis claviers.

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".
Il faudra vérifier que chacun de ces raccourcis clavier sont toujours implémentés de manière pertinente et identique sur chaque page d'un ensemble de pages d'un site.

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.

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

revenir en haut de la page

Références

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

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.