Navigation au Clavier

Veillez à ce que toutes les fonctionnalités du site soient utilisables avec le clavier en plus de la souris.

• Tous les éléments interactifs (liens, éléments de formulaire) peuvent être atteints avec la touche TAB et activés au moyen du clavier.
• Le focus est visible lors de la tabulation.
• L'ordre de tabulation est logique.
• Le focus se déplace lorsque c'est nécessaire.

C'est très facile à tester vous-même. Attention, si vous utilisez un Mac, vous devrez le configurer pour permettre la navigation au clavier.

Pourquoi est-ce important?

• Certaines personnes ne peuvent pas utiliser de souris ou ne peuvent pas la contrôler avec précision.
• Les personnes aveugles ne peuvent utiliser la souris puisqu'elles n'ont pas de contrôle sur le pointeur; elles la remplacent par un clavier classique ou un clavier Braille et utilisent des raccourcis.
• Il existe une grande variété de mécanismes d'entrée alternatifs. Ces mécanismes d'entrée alternatifs ont en commun qu'ils émulent le clavier et sont perçus comme tels d'un point de vue des applications.

Tester l'accessibilité au clavier

Laissez la souris de côté et essayez d'atteindre tous les hyperliens via la touche TAB du clavier. Pour revenir au lien précédent, utilisez la combinaison de touche MAJ+TAB. Pour activer le lien, appuyer sur ENTER. Il faut pouvoir accéder à toute l'information du site par ce procédé. Faites particulièrement attention aux menus déroulants, albums photos, lecteurs multimédia, carrousels, infobulles, ...

Pour les pages qui contiennent des formulaires vérifiez que le formulaire est utilisable entièrement sans la souris. Utilisez la barre espace pour cocher une case à cocher ou un bouton radio, et les flèches vers le haut et vers le bas pour faire une sélection dans une liste déroulante.

Vérifiez également qu'il n'y ait pas de pièges au clavier: s'il est possible de déplacer le focus dans un élément au moyen du clavier, il faut pouvoir en ressortir au moyen du clavier.

Focus visible

Les navigateurs mettent en évidence de manière visuelle l'élément qui a le focus. Dans certains navigateurs cet élément est entouré d'un cadre en pointillés.

Cette indication visuelle est indispensable pour se situer dans la page si l'on la parcourt avec le clavier. Il n'est donc pas permis de la supprimer. Pour faciliter l'accès aux personnes malvoyantes, il est même recommandé de l'accentuer visuellement. Ceci permet au visiteur de savoir à tout moment où il se situe sur la page. Les exemples ci-dessous illustrent ce point.

Exemple de focus supprimé (Pas OK)

a:focus { 
 outline: none; 
} 

a:focus { 
 outline: 0;
}

Exemple d'accentuation du focus (Mieux)

En définissant un "focusstate" pour les hyperliens, ceux-ci seront bien visibles lors du parcours de la page au moyen du clavier.

a:focus {
 background-color: #000000;
 color: #FFFFFF;
} 

Cette adaptation simple n'est pas visible pour les utilisateurs de la souris mais est une aide précieuse pour les utilisateurs du clavier.

Ordre de tabulation

Pour un utilisateur qui parcourt un site web en utilisant le clavier, il est nécessaire que l'ordre de tabulation soit logique et prévisible.

L'ordre de tabulation est l'ordre dans lequel le focus se déplace sur la page lorsque l'on navigue avec la touche TAB. Par défaut, l'ordre de tabulation est l'ordre dans lequel les éléments apparaissent dans le code source. Dans ce cas, si le code source est structuré de manière logique, l'ordre de tabulation le sera également.

Il est possible de manipuler l'ordre de tabulation en utilisant l'attribut tabindex avec des valeurs positives, mais c'est déconseillé.

Attention, seuls les éléments interactifs (liens et éléments de formulaire) sont repris dans l'ordre de tabulation. Un lien sans attribut href n'est pas atteignable au clavier.

Problèmes fréquents

• Les liens sur la même page comme les liens d'évitement par exemple ne fonctionnent correctement dans la plupart des navigateurs que si vous ajoutez tabindex="-1" à la destination du lien. Voir l'article Des liens sur la même page qui fonctionnent pour tout le monde.
• Les faux liens, boutons et éléments de formulaire: un div, un span, une image sur lesquels on ajoute du javascript pour les rendre cliquables sont souvent inutilisables avec le clavier. Onclick? Utilisez de préférence de vrais liens (avec href="#") ou des boutons. Si les liens sont activés par du Javascript, veillez à utiliser uniquement des event handlers indépendants du mécanisme d'entrée. Par exemple onMouseOver utilisé seul posera problème parce que seul le passage de la souris sera détecté et pas la navigation vers l'élément par le clavier. Vous trouverez plus d'infos à ce sujet dans l'article de WebAIM sur le Javascript accessible.
• Les infobulles: Quand une information est contenue dans une infobulle (tooltip), il est fréquent qu'elle soit inaccessible par le clavier. Ceci est illustré dans cet exemple qui compare une infobulle inaccessible et sa version accessible: le texte d'aide n'apparaît que lorsque l'on passe avec la souris au dessus du premier point d'interrogation. Par contre le texte d'aide est accessible au clavier pour le deuxième point d'interrogation car cette image est un lien, ce qui permet de lui donner le focus, et un script permet d'afficher le texte.
• Les fenêtres modales: souvent le focus ne se déplace pas dans la fenêtre de dialogue modale, après son ouverture. Cela rend la fermeture difficile si pas impossible car il faut tabuler à travers tous les liens de la page (cachée) avant d'arriver peut-être sur le bouton de fermeture. Pour qu'une fenêtre modale soit accessible avec le clavier il faut que le focus se déplace dedans après son ouverture, que tous les boutons soient utilisables avec le clavier, et que le focus retourne à son point d'origine après la fermeture.
• Les menus déroulants sont généralement pensés pour être utilisés avec la souris mais très souvent ils sont impossible à utiliser au clavier. Comment construire un menu déroulant accessible ?