1.1 La totalité du site est utilisable au moyen du clavier

Veillez à ce que toutes les fonctionnalités du site soient utilisables avec le clavier en plus de la souris. Cela signifie entre autres que tous les liens et éléments de formulaire doivent être atteints avec la touche TAB et activés avec la touche ENTER. Il faut également que ce soit toujours clair visuellement quel lien ou élément de formulaire a le focus.

Pourquoi?

Certaines personnes sont dans l’impossibilité d’utiliser la 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. Quand même l'utilisation d'un clavier classique est impossible, 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.

En pratique

Il faut pouvoir atteindre tous les hyperliens, les champs de formulaires, les boutons, bref pouvoir naviguer dans tout le site en utilisant uniquement le clavier. La touche TAB permet de parcourir tous les hyperliens et champs de formulaire.

Il faut également veiller à ce 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.

capture d'écran avec focus par défaut

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.

lien infolettre avec texte blanc sur fond noir au lieu de noir sur fond gris (reste du menu)

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. AnySurfer déconseille l'utilisation de tabindex. Si vous tenez à l'utiliser quand même, veillez alors à donner un tabindex à tous les éléments HTML qui font partie de l'ordre de tabulation. Utilisez de préférence des multiples de 100. Cela vous permettra d'intercaler facilement des éléments sans devoir adapter toute la numérotation.

Attention, seuls les éléments interactifs ( liens et éléments de formulaire) sont repris dans l'ordre de tabulation. Si vous utilisez OnClick pour rendre un div cliquable, les personnes navigant au clavier n'y auront pas accès. Utilisez donc toujours de vrais liens (avec href="#" ou des boutons. Les détails sont expliqués dans l'article Onclick? préférez un lien ou un bouton.

Menus déroulants

Si vous utilisez CSS pour cacher les sous-niveaux d'un menu déroulant, il n'est en général pas possible d'atteindre ces sous-niveaux avec la touche de tabulation. Vous pouvez résoudre cela :

  • en utilisant un menu déroulant qui peut être commandé par le clavier, voir l'article de blog Menus déroulants accessibles.
  • en répétant les sous-niveaux inaccessibles de la navigation dans une page sous-jacente qui est accessible par le 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.
  • Des liens et boutons qui n'en sont pas: un div, un span, une image sur lesquels on ajoute du javascript pour les rendre cliquables sont souvent inutilisables avec le clavier. 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 boutons de commande d'une vidéo: en Flash sont souvent inaccessibles. Il faut pouvoir les utiliser avec le clavier indépendamment de la technologie utilisée.
  • 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 lightbox pour afficher des photos: souvent le focus ne se déplace pas dans la lightbox, après l'ouverture de la lightbox avec le clavier. 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 lightbox 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.

Moins courant mais également problématique

  • Les images cliquables côté serveur: elles ne sont pas accessibles. L'information sur les liens hypertextes qu'elles contiennent est stockée dans le serveur. Elles envoient les coordonnées du curseur au moment du click vers le serveur. Elles ne fonctionnent pas avec le clavier. Elles ne sont pas permises sauf si une autre option accessible est proposée.
  • Les actions soumises à des contraintes de temps: devoir maintenir une touche enfoncée ou devoir l'enfoncer trois fois d'affilée rapidement sont des actions qui pourraient poser problème à certaines personnes et les empêcher d'accéder à certaines fonctionnalités du site. Les actions à faire au clavier ne doivent pas être soumises à des contraintes de temps.

Recommandations

  • Si vous utilisez des raccourcis clavier dans votre site, nous conseillons de leur assigner des chiffres plutôt que des lettres. En général, les chiffres sont moins utilisés comme raccourcis.
  • Pour aider les personnes qui ont des difficultés motrices, vous pouvez grâce aux CSS (a:hover) mettre en évidence la zone cliquable lorsque l'on passe dessus avec la souris (mouseover). Vous pouvez par exemple entourer les liens ou leur donner une autre couleur d'arrière-plan.
  • Évitez l'utilisation de listes déroulantes à sélection multiple.

Exception

Pour les opérations qui ne peuvent pas être exécutées avec un clavier, comme faire un dessin, cette directive n'est pas d'application. On notera cependant que certaines opérations sont possibles par le clavier : tracer des lignes droites, adapter la taille de fenêtres ou déplacer des objets.

comment tester

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.

Si vous utilisez un Mac, vous devrez le configurer pour permettre la navigation au clavier.