Table des matières
- Le problème
- La solution
- Les règles qui s'appliquent à la navigation au clavier
- L'évaluation de conformité
- La comparaison entre les standards SGQRI et WCAG 2.0
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 avec un logiciel de grossissement en 8X ou plus.
Certains composants de la page (ex. 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.
Retour en haut de pageLa 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 technologies 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 du clavier.
- Les utilisateurs ayant des limitations motrices ou visuelles pourront donc accéder aux mêmes fonctionnalités que l'ensemble de vos visiteurs.
Exemples de code pour l'utilisation de la souris et du clavier
- 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 la souris
| 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 dans 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, avec une touche fléchée ou par 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 à la navigation au clavier
| SGQRI 008- 01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 |
|---|---|---|---|
| 19. Tout contenu interactif présenté dans une page Web doit : a) être conçu pour que tout élément de programmation soit utilisable avec les technologies d’adaptation informatiques et avec le clavier; | 14. Tout contenu interactif présenté dans un document téléchargeable doit être conçu pour que tout élément de programmation soit utilisable avec les technologies d’adaptation informatiques et avec le clavier. | 17. Tout contenu interactif présenté dans une animation Web doit : a) être conçu pour que tout élément de programmation soit utilisable avec les technologies d’adaptation informatiques et avec le clavier; |
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. |
|
19. Tout contenu interactif présenté dans une page Web doit : 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, permette aussi un déplacement hors de cet applet ou de cet objet en utilisant seulement le clavier; 19. Tout contenu interactif présenté dans une page Web doit : 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 curseur, vers le haut, le bas, la gauche ou la droite, ou tabulation au clavier, indiquer la méthode à utiliser pour sortir de cet applet ou de cet objet; |
17. Tout contenu interactif présenté dans une animation Web doit : b) être conçu pour que toute zone active pouvant être déplacée avec le clavier dans un élément d’une animation Web, permette aussi un déplacement hors de cet élément en utilisant seulement le clavier; 17. Tout contenu interactif présenté dans une animation Web doit : c) si un déplacement hors d’un composant d’une animation Web exige davantage que l’utilisation d’une simple touche curseur, vers le haut, le bas, la gauche ou la droite, ou tabulation au clavier, indiquer la méthode à utiliser pour sortir de ce composant; |
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. |
|
| 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) | |||
| 21. Tout formulaire Web doit : e) être conçu pour que tout champ dans un formulaire soit exempt d’une valeur textuelle par défaut; ne sont pas considérées comme valeur textuelle par défaut les données saisies dans un formulaire et ramenées à la personne à des fins de validation; | 17. Tout formulaire téléchargeable à remplir à l’écran doit : c) être conçu pour que tout champ dans un formulaire soit exempt d’une valeur textuelle par défaut ; ne sont pas considérées comme valeur textuelle par défaut les données saisies dans un formulaire et ramenées à la personne à des fins de validation; |
L'évaluation de conformité
| SGQRI 008- 01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 Grille AccessiWeb 2.1 de Braillenet (suivre ce lien pour voir les tests rattachés à chaque critère) |
|---|---|---|---|
Tout élément de programmation est-il utilisable avec les technologies d’adaptation informatiques et avec le clavier (SW-19a) ? |
Tout élément de programmation est-il utilisable avec les technologies d’adaptation informatiques et avec le clavier (DT-14) ? | Tout élément de programmation est-il utilisable avec les technologies d’adaptation informatiques et avec le clavier (M-17a) ? |
Critère 4.20 [Bronze] La consultation de chaque média temporel est-elle contrôlable par le clavier et la souris ? Critère 4.21 [Bronze] La consultation de chaque média non temporel est-elle contrôlable par le clavier et la souris ? Critère 4.22 [Bronze] Chaque média temporel et non temporel est-il compatible avec les technologies d'assistance ? Critère 6.5 [Bronze] Chaque zone cliquable d'une image réactive côté serveur est-elle doublée d'un lien dans la page ? Critère 7.3 [Bronze] Chaque script est-il contrôlable par le clavier et la souris (hors cas particuliers) ? |
Toute zone active pouvant être déplacée avec le clavier dans un applet ou un objet intégré dans la page, peut-elle aussi être déplacée hors de cet applet ou de cet objet en utilisant seulement le clavier (SW-19b) ? Si un déplacement hors d’un applet ou d’un objet exige davantage que l’utilisation d’une flèche (touche curseur, vers le haut, le bas, la gauche ou la droite) ou d'une tabulation au clavier, la méthode à utiliser pour sortir de cet applet ou de cet objet est-elle indiquée (SW-19c) ? |
Toute zone active pouvant être déplacée avec le clavier dans un élément de l'animation, peut-elle aussi être déplacée hors de cet élément en utilisant seulement le clavier (M-17b) ? Si un déplacement hors d’un composant d'une animation exige davantage que l’utilisation d’une flèche (touche curseur, vers le haut, le bas, la gauche ou la droite) ou d'une tabulation au clavier, la méthode à utiliser pour sortir de ce composant est-elle indiquée (M-17c) ? |
Critère 12.14 [Bronze] Dans chaque page Web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ? | |
À l'exception des données saisies dans un formulaire et ramenées à la personne à des fins de validation, tout champ est-il exempt d’une valeur textuelle par défaut (SW-21e) ? |
À l'exception des données saisies dans un formulaire et ramenées à la personne à des fins de validation, tout champ est-il exempt d’une valeur textuelle par défaut (DT-17c) ? |
La comparaison entre les standards SGQRI et WCAG 2.0
Les exigences des standards SGQRI correspondant aux critères de succès 2.1.1 et 2.2.2 sont une simple reformulation qui a exactement la même portée que les WCAG 2.0. Toutefois, les exigences portant sur l'utilisation de texte par défaut dans un formulaire n'ont pas de correspondance directe dans les WCAG 2.0 qui n'interdisent pas cette pratique bien que diverses techniques tentent d'en réduire les effets indésirables.
Un site Web qui applique les exigences des standards SGQRI en matière de navigation au clavier est conforme aux critères de succès 2.1.1 et 2.1.2 des WCAG 2.0. Réciproquement, un site Web qui applique les critères de succès 2.1.1 et 2.1.2 des WCAG 2.0 est conforme aux standards SGQRI sans oublier toutefois que les stanards SGQRI interdisent l'utilisation d'une valeur textuelle par défaut dans un formulaire.
Voir aussi :
- Comprendre la règle 2.1 [Accessibilité au clavier]
- Comprendre le critère de succès 2.1.1 [Clavier]
- Comprendre le critère de succès 2.1.2 [Pas de piège au clavier]
- Comprendre le critère de succès 2.1.3 [Clavier (sans exception)]
Retour en haut de page