Veillez à ce que toutes les fonctionnalités puissent être accessibles et utilisées avec le clavier, dans l’ordre logique

Il doit être possible d’utiliser les pages web à partir du clavier uniquement. Assurez-vous donc que, quand on ne navigue qu’avec le clavier, tous les éléments sont accessibles et qu’il est impossible de se retrouver coincé. Veillez également à ce que le visiteur puisse voir où il se trouve et que l’ordre de navigation reste logique.

Comment vous y prendre ?

Accessible et utilisable avec le clavier

Toutes les fonctions d’une page web doivent être accessibles et utilisables avec le clavier ou une interface clavier. Qu’il s’agisse aussi bien de la fonction de recherche que des menus de navigation, des liens dans des textes, des lecteurs de média, ou encore des formulaires... La fonction ne doit pas forcément s’exécuter de manière 100 % identique avec le clavier, tant que le même but est atteint.

Dans l’ensemble, pour répondre à cette exigence, il vous suffit d’utiliser correctement les éléments HTML adéquats, pour les liens et les formulaires par exemple. Ensuite, vous devez aussi vous assurer que certaines fonctions et autres effets ne sont pas liés uniquement à la souris. Lorsque des scripts sont utilisés pour exécuter des actions, ceux-ci doivent (également) réagir aux actions effectuées avec le clavier. Et les effets qui se produisent quand un visiteur passe sa souris sur un élément (il le survole) doivent aussi apparaître quand on place le focus sur l’élément avec le clavier.

Pas de piège au clavier

Par piège au clavier, l’on entend un élément sur la page web auquel vous pouvez accéder avec le clavier, mais que vous ne pouvez plus quitter une fois que vous êtes dedans. Vous êtes alors bloqué. Cela arrive parfois lorsqu’il y a des plug-ins comme Flash, Silverlight ou Java. Même si l’application pour laquelle le plug-in est nécessaire peut être contrôlée à partir du clavier, il peut arriver que le visiteur ne puisse pas aller plus loin et avoir accès au reste de la page. Pour sortir de l’application, il a alors besoin de la souris. Or, vu que tous les visiteurs ne se servent pas de la souris, cette action doit également pouvoir être réalisée avec le clavier seulement.

Parcours de focus logique

L’ordre dans lequel les éléments de la page web reçoivent le focus quand un visiteur navigue avec le clavier doit être logique. En d'autres termes, cet ordre ne doit pas faire perdre sa signification au contenu et les éléments doivent rester faciles à utiliser.

Le parcours du focus par défaut est déterminé dans HTML par l’ordre dans lequel les éléments sont enregistrés dans le code source, tant que vous ne le modifiez pas avec du script ou du code supplémentaire. Quand l’ordre visuel des éléments est le même que celui dans le code source, le parcours du focus est lui aussi souvent logique. Supposons que le menu de navigation se trouve en haut de la page, il est alors forcément l’un des premiers éléments auquel vous accédez avec le clavier. Lorsque l’ordre dans le code source n’est pas identique à l’ordre visuel, le parcours du focus doit toutefois rester logique.

Afficher et masquer des éléments

Même quand vous travaillez avec des scripts pour afficher et masquer des éléments lorsqu’un visiteur clique sur un bouton ou un lien, vous devez surveiller le parcours du focus. Pensez par exemple à un menu déroulant ou à une fenêtre pop-up sur le site web. Procédez comme suit :

1. Utilisez toujours un lien (élément <a>) ou un élément de formulaire HTML (comme <select>, <input> type=”checkbox”>, <input type=”button”>, <button>, <input type=”submit”>) pour activer l’option qui sert à afficher/masquer. Ces éléments peuvent recevoir le focus par défaut dans les navigateurs. Dans les scripts, vous devez prendre l’événement ‘onClick’ de ces éléments.
2. Placez le contenu qui s’affiche quand on clique sur le lien ou sur l’élément du formulaire directement après ce lien ou cet élément dans le code source. Vous pouvez soit placer à l’avance l’élément HTML avec le nouveau contenu à cet endroit dans le code et le masquer avec CSS (‘display:none’), soit l’insérer au moment où il est activé.
   • Dans le premier cas, vous devez uniquement adapter la visibilité avec du script (‘display:block’).
   • Dans le deuxième cas, vous ajoutez vous-même le nouveau contenu avec du script. En le plaçant après l’élément d’activation, le nouveau contenu devient le prochain élément qui aura le focus.

Rendre le focus visible

Lorsqu’un élément de la page a le focus, il faut que cela soit visible. Les navigateurs possèdent déjà par défaut un indicateur de focus qui s’affiche avec tous les éléments HTML standard qui reçoivent le focus (par exemple les champs dans un formulaire). Par conséquent, si vous n’ajoutez pas de script ou de code CSS supplémentaire et que vous n’utilisez que des éléments HTML standard, vous respectez déjà cette exigence. Un des avantages est que les visiteurs qui en ont besoin peuvent, à l’aide de leurs propres programmes, remplacer l’indicateur de focus par défaut par un autre plus visible, par exemple.

Vous ne pouvez par contre pas supprimer avec CSS le liseré de focus (outline) des éléments actifs. Si vous le faites quand même, vous devez alors créer des styles dans CSS pour le focus des éléments ou utiliser du script à cet effet.

Exemples

Proposer des solutions alternatives aux personnes qui utilisent le clavier

Dans le cas d’une liste à trier avec la souris au moyen de l’action ‘glisser-déposer’ (‘drag and drop’), vous pouvez ajouter des boutons permettant aux visiteurs qui se servent du clavier de déplacer les éléments vers le haut ou vers le bas. L’objectif (trier la liste) peut ainsi être atteint de différentes manières. Il est essentiel que l’ordre soit modifié non seulement visuellement, mais aussi dans le code source (grâce au script).

Parcours de focus logique

Dans le cas d’une page web avec deux formulaires l’un à côté de l’autre, le parcours du focus doit suivre l’ordre de lecture logique. Ce qui signifie que vous devez pouvoir parcourir d’abord le premier formulaire dans son intégralité avec la touche de tabulation du clavier avant de passer au second.

Rendre le focus visible

Le code CSS suivant modifie la couleur d’arrière-plan et de premier plan d’un lien (l’élément <a>) quand il reçoit le focus avec la souris et le clavier.

a:hover, a:active, a:focus {
background-color: #DCFFFF;
color: #000066;
}

 

Pour les développeurs

Le développeur doit s’assurer que tous les éléments du site web sont accessibles et peuvent être utilisés avec le clavier, dans un ordre logique et avec un focus visible.