Table des matières
- Le problème
- La solution
- Les règles qui s'appliquent à l'ordre de tabulation
- L'évaluation de conformité
- La comparaison entre les standards SGQRI et WCAG 2.0
Le problème
Les personnes ayant des limitations motrices (ne leur permettant pas d'utiliser une souris), et les personnes ayant des limitations visuelles sévères, déplacent le focus dans la page à l'aide de la touche tabulation. Ce parcours au clavier doit donc être logique.
De plus, pour une personne ayant des limitations motrices (mais avec une vision suffisante) qui se déplace au clavier, il est important que le repère du focus soit visible. En sachant sur quel élément est placé le focus, elle peut activer le bon lien ou le bon élément de formulaire.
Retour en haut de pageLa solution
- Les navigateurs ont leur propre façon de mettre cet élément en évidence. Il s'agit généralement d'un encadré pointillé. Toutefois, un concepteur peut, volontairement ou non, contrecarrer cette fonctionnalité par la feuille de styles. Vous devez donc vous assurer que cet indicateur est toujours visible, du début à la fin du parcours.
- Pour les menus, il est aussi possible de mettre en évidence le focus par un effet d'illumination, un soulignement, un encadrement ou tout autre moyen.
- L'ordre de tabulation est contrôlé par l'ordre d'apparition des contenus dans le code source de la page. La façon la plus simple de corriger l'ordre est donc de revoir l'ordre du code source.
- Si vous utilisez des menus déroulants, vous devez vous assurer que les sous-menus seront adjacents, dans l'ordre de tabulation, à l'élément de menu qui en déclenche l'ouverture.
- En dernier recours, vous pouvez corriger l'ordre de tabulation en utilisant l'attribut tabindex avec des numéros rétablissant un ordre plus approprié. Mais attention, les éléments dont l'ordre ne sera pas précisé avec cet attribut seront repris dans leur ordre habituel à la suite de ceux auxquels vous aurez fixé vous-même un ordre. Si vous ne pouvez faire autrement, vérifiez attentivement l'ordre de tabulation sur toute la page pour déceler des problèmes éventuels.
Exemple de code pour l'utilisation de tabindex
[...] <label for="pnom">Prénom</label> <input id="pnom" name="pnom" type="text" size="15" tabindex="2" /> [...] <a href="../contact/">Contacter le service à la clientèle</a >. [...] <a href="/index.php" tabindex="1">Retour au site Web</a>. [...] </html>Retour en haut de page
Les règles qui s'appliquent à l'ordre de tabulation
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 |
|---|---|---|---|
| 16. La structure d’une page Web doit comporter : c) la possibilité de parcourir la page au clavier en respectant un ordre séquentiel logique du contenu; | 11. La structure d’un document téléchargeable doit comporter : a) la possibilité de parcourir le document au clavier en respectant un ordre séquentiel logique du contenu; |
14. La structure de l’animation Web doit : a) offrir la possibilité de parcourir cette animation Web au clavier en respectant un ordre séquentiel logique du contenu; |
2.4.3 Parcours du focus : si une page Web peut être parcourue de façon séquentielle et que les séquences de navigation affectent la signification ou l'action, les éléments reçoivent le focus dans un ordre qui préserve la signification et l'opérabilité. (Niveau A) |
| 15. Pour les exigences particulières applicables à la navigation, tout site Web doit : e) comporter un mode d’utilisation où la zone active est visible pour toute interface utilisable au clavier; | 13. Pour les exigences particulières applicables à la navigation, toute animation Web doit : e) comporter un mode d’utilisation où la zone active est visible pour toute interface utilisable au clavier;. | 2.4.7 Visibilité du focus : toute interface utilisable au clavier comporte un mode de fonctionnement où le focus est visible. (Niveau AA) |
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) |
|---|---|---|---|
La page peut-elle être parcourue au clavier en respectant un ordre séquentiel logique du contenu (SW-16c) ? |
Le document peut-il être parcouru au clavier en respectant un ordre séquentiel logique du contenu (DT-11a) ? |
L'animation Web peut-elle être parcourue au clavier en respectant un ordre séquentiel logique du contenu (M-14a) ? |
Critère 12.13 [Bronze] Dans chaque page Web, l'ordre de tabulation est-il cohérent ? |
Le déplacement du focus au clavier est-il toujours visible (SW-15e) ? |
Le déplacement du focus au clavier est-il toujours visible (M-13e) ? | Critère 10.7 [Bronze] Dans chaque page Web, pour chaque élément recevant le focus, la prise de focus est-elle visible ? |
La comparaison entre les standards SGQRI et WCAG 2.0
Dans le cas du parcours au clavier et de la visibilité du focus la correspondance est tout à fait évidente avec les critères de succès 2.4.3 et 2.4.7 des WCAG 2.0.
Dans ce contexte, un site Web qui applique les exigences des standards SGQRI en matière de parcours au clavier est conforme aux critères de succès 2.4.3 et 2.4.7 des WCAG 2.0. Réciproquement, un site Web qui applique les critères de succès 2.4.3 et 2.4.7 sera conforme aux standards SGQRI.
Voir aussi :
- Comprendre la règle 2.4 [Navigable]
- Comprendre le critère de succès 2.4.3 [Parcours du focus]
- Comprendre le critère de succès 2.4.7 [Visibilité du focus]
Retour en haut de page