UTILISABLE : Règle 2.1 Accessibilité au clavier
Règle 2.1 Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier.
Comprendre la règle 2.1 (en anglais)
Navigation au clavier
Le problème
Les personnes ayant des limitations motrices qui ne leur permettent pas d’utiliser une souris ou qui rendent cette utilisation difficile, doivent pouvoir se déplacer dans une page Web en utilisant des commandes au clavier.
Les personnes ayant des limitations visuelle sévères utilisent aussi le clavier pour se déplacer dans une page Web parce qu’elles ne peuvent utiliser la souris avec un lecteur d’écran ou un logiciel de grossissement en 8X ou plus.
Certains composants de la page, par exemple un applet ou un objet peuvent piéger l’utilisateur d’un clavier en lui permettant d’y entrer avec la touche tabulation mais pas toujours d’en ressortir pour revenir sur ses pas ou pour poursuivre la consultation du reste de la page.
La solution
- Vous ne devez pas utiliser de liens ou de champs de formulaires qui sont simulés avec javascript car ces composants deviendront inutilisables au clavier ou avec les technologie d'adaptation informatiques ;
- Si vous utilisez des objets ou des applets, vous devez vous assurer que l'utilisateur se déplaçant au clavier ne risque pas d'y rester piégé ;
- Vous devez vous assurer que les événements comme « onmouseover » ou « onmouseout » sont dédoublés avec des événements au clavier comme « onfocus » et « onblur » ;
- Ainsi, tous les événements déclenchés à l'aide de la souris pourront également l'être par l'utilisation à l’aide du clavier ;
- Les utilisateurs ayant des limitations motrices ou visuelles pourront donc accéder au mêmes fonctionnalités que l'ensemble de vos visiteurs.
Exemples de code
- Utilisable avec la souris uniquement :
<a id="emplois-et-formation"
href="/emploi-et-formation/"
title="Emploi et formation"
onmouseover="document.getElementById('img2')
.src='/img/navprinc_emplois_on.png';"
onmouseout="document.getElementById('img2')
.src='/img/navprinc_emplois_off.png';
"> Emploi et formation</a>- Utilisable à l’aide de la souris et du clavier :
<a id="emplois-et-formation"
href="/emploi-et-formation/"
title="Emploi et formation"
onmouseover="document.getElementById('img2')
.src='/img/navprinc_emplois_on.png';"
onfocus="document.getElementById('img2')
.src='/img/navprinc_emplois_on.png';"
onmouseout="document.getElementById('img2')
.src='/img/navprinc_emplois_off.png';"
onblur="document.getElementById('img2')
.src='/img/navprinc_emplois_off.png';
">Emploi et formation</a>Événements dépendants ou indépendants de JavaScript
| Dépendants | Indépendants |
|---|---|
|
onmouseover |
Onfocus |
|
onmouseout |
Onblur |
|
onmousedown |
Onkeydown |
|
onmouseup |
Onkeyup |
|
onclick |
ATTENTION! Cet événement est déjà accessible au clavier, il ne faut donc pas le doubler de son équivalent onkeypress |
|
ondblclick |
ATTENTION! N'a pas d'équivalent |
- S’il est possible d’entrer dans un objet ou un applet à l’aide du clavier, il doit être possible de poursuivre le parcours du contenu hors de cet objet ou de cet applet en utilisant seulement le clavier ;
- Il faut donc prévoir un mécanisme qui permette d’en sortir avec la touche tabulation, une touche flèchée ou tout autre moyen ;
- Si la touche tabulation ou une touche flèchée ne suffisent pas, il faut rendre disponible au moment voulu, une explication sur la méthode à utiliser.
Les règles qui s’appliquent
WCAG 2.0
2.1.1 Clavier : toutes les fonctionnalités du contenu sont utilisables à l'aide d'une interface clavier sans exiger un rythme de frappe propre à l'utilisateur, sauf lorsque la fonction sous-jacente nécessite une saisie qui dépend du tracé du mouvement effectué par l'utilisateur et pas seulement des points de départ et d'arrivée de ce tracé. (Niveau A)
Note 1 : cette exception ne concerne que la fonction sous-jacente et non la technique de saisie. Par exemple, lorsqu'on utilise l'écriture manuscrite pour saisir du texte, la technique de saisie (l'écriture manuscrite) nécessite une saisie qui dépend d'un tracé, mais la fonction sous-jacente (la saisie de texte) ne le requiert pas.
Note 2 : cela n'interdit pas et ne devrait pas décourager l'utilisation de la souris ou de toute autre méthode de saisie en plus de l'utilisation du clavier.
Comment satisfaire à 2.1.1 (en anglais) | Comprendre 2.1.1 (en anglais)
Techniques suffisantes
- Ensuring keyboard control by using one of the following techniques.
- G90: Providing keyboard-triggered event handlers using one of the following techniques:
- FLASH22: Adding keyboard-accessible actions to static elements (Flash)
- FLASH16: Making actions keyboard accessible by using the click event on standard components (Flash)
- FLASH14: Using redundant keyboard and mouse event handlers in Flash (Flash)
Erreurs fréquentes à éviter
- F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function
- F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
- F42: Failure of Success Criterion 1.3.1 and 2.1.1 due to using scripting events to emulate links in a way that is not programmatically determinable
2.1.2 Pas de piège au clavier : si le focus du clavier peut être positionné sur un élément de la page à l'aide d'une interface clavier, réciproquement, il peut être déplacé hors de ce même composant simplement à l'aide d'une interface clavier et, si ce déplacement exige plus que l'utilisation d'une simple touche flèche ou tabulation ou toute autre méthode standard de sortie, l'utilisateur est informé de la méthode permettant de déplacer le focus hors de ce composant. (Niveau A)
Note : puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l'utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu'il soit utilisé pour satisfaire à d'autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l'exigence de conformité 5 : Non-interférence.
Comment satisfaire à 2.1.2 (en anglais) | Comprendre 2.1.2 (en anglais)
Techniques suffisantes
- G21: Ensuring that users are not trapped in content
- FLASH17: Preventing a keyboard trap in Flash content (Flash)
Erreurs fréquentes à éviter
2.1.3 Clavier (pas d'exception) : toutes les fonctionnalités du contenu sont utilisables à l'aide d'une interface clavier sans exiger un rythme de frappe propre à l'utilisateur. (Niveau AAA)
Comment satisfaire à 2.1.3 (en anglais) | Comprendre 2.1.3 (en anglais)
Techniques suffisantes
Aucune techniques spécifiques.
SGQRI
008-01 : Accessibilité d'un site Web
- 19 a) être conçu pour que tout élément de programmation soit utilisable avec les technologies d’adaptation informatiques et le soit avec le clavier ;
- 19 b) être conçu pour que toute zone active pouvant être déplacée avec le clavier dans un applet ou un objet intégré dans la page Web, le soit aussi hors de cet applet ou de cet objet en utilisant seulement le clavier ;
- 19 c) si un déplacement hors d’un applet ou d’un objet intégré dans une page Web exige davantage que l’utilisation d’une simple touche flèche ou tabulation au clavier, indiquer la méthode à utiliser pour sortir de cet applet ou de cet objet ;
008-02 : Accessibilité d'un document téléchargeable
- 15 b) Un élément de programmation destiné à l’utilisateur doit être entièrement utilisable à l’aide du clavier.
- 15 c) Si la zone active peut être déplacée dans un composant d’un document téléchargeable par une interface au clavier, la zone active doit aussi être déplaçable hors de ce composant en utilisant seulement une interface au clavier.
- 15 d) Avec une interface au clavier, si un déplacement hors d’un composant d’un document téléchargeable exige davantage que l’utilisation d’une simple touche flèche ou tabulation, l’utilisateur doit être informé de la méthode à utiliser pour sortir de ce composant.
008-03 : Accessibilité du multimédia dans un site Web
- 12 c) Les éléments de navigation doivent pouvoir être utilisés à l’aide des technologies d’adaptation informatiques et permettre l’accès à tout le contenu informatif dans un ordre séquentiel logique.
- 16 b) Un élément de programmation doit être entièrement utilisable à l’aide du clavier.
- 16 c) Si la zone active peut être déplacée dans un composant d’une animation vectorielle par une interface au clavier, la zone active doit aussi être déplaçable hors de ce composant en utilisant seulement une interface au clavier.
- 16 d) Avec une interface au clavier, si un déplacement hors d’un composant d’une animation vectorielle exige davantage que l’utilisation d’une simple touche flèche ou tabulation, l’utilisateur doit être informé de la méthode à utiliser pour sortir de ce composant.
