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. L'émulation d'un mécanisme de pointage par le clavier n'est pas suffisante.

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. Les paragraphes suivants abordent certains points particuliers.

L'émulation d'un mécanisme de pointage, comme la souris, par le clavier n'est pas suffisante. Dans ce cas, même en faisant évoluer le curseur avec le clavier, les actions seront perçues comme des actions de la souris par les applications et la navigation dans la page en passant de lien en lien ne sera pas possible.

Focus

Les navigateurs mettent en évidence de manière visuelle l'élément qui a le focus, c'est à dire l'élément qui a été sélectionné par le clavier (tabulation ou raccourci) et qui peut être activé (en pressant ENTER pour un hyperlien ou un bouton par exemple ou en y ajoutant du texte pour un champ de saisie). En général, 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. Au contraire, pour faciliter l'accès aux personnes malvoyantes, il est recommandé de l'accentuer par l'utilisation de CSS. 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 { border: none }
a:focus { border: 0 }

Exemple de focus par défaut (Le minimum)

L'élément sélectionné par la tabulation est encadré en pointillés.

Exemple d'accentuation du focus (Mieux)

Dans l'exemple ci-dessous on a défini un "focusstate" pour les hyperliens dans la feuille de style. Le résultat est que lorsqu'un hyperlien reçoit le focus il est en blanc sur fond bleu plutôt que bleu sur fond blanc.

 a:focus {
  background-color: #0053b3;
  color: #fff;
  }

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.

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, par exemple Ultimate Dropdown Menu
• en répétant les sous-niveaux inaccessibles de la navigation dans une page sous-jacente qui est accessible par le clavier. Vous trouverez un exemple sur le site web 12-18 (les scouts). En activant le lien 'A l'Agenda'', qui est un menu déroulant, on arrive sur une page dont là navigation secondaire (verticale) contient les mêmes liens que ce menu déroulant sur la page d'accueil.
• en prévoyant une feuille de style optionnelle (avec commutateur de feuille de style ou CSS-switcher) qui affiche tous les sous-niveaux simultanément, comme dans un plan de site.

Problèmes fréquents

• Devoir maintenir une touche enfoncée ou devoir l'enfoncer trois fois d'affilée rapidement sont des actions soumises à des contraintes de temps qui pourraient poser problème à certaines personnes et les empêcher d'accéder à certaines fonctionnalités du site avec le clavier. Les actions à faire au clavier ne doivent pas être soumises à des contraintes de temps.
• Si vous utilisez des liens graphiques, lisez également les directives concernant les images et les textes graphiques
• 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 images cliquables côté serveur 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 boutons de commande d'une vidéo doivent être utilisables avec le clavier indépendamment de la technologie utilisée.
• 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 inacesssible et sa version accessible: le texte d'aide n'apparait 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.

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.
• Evitez 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.