Rangez votre souris dans un tiroir, ouvrez votre propre site et appuyez sur la touche Tab. En quelques minutes, vous saurez si les personnes qui ne peuvent pas utiliser de souris peuvent réellement se servir de votre site : voient-elles où elles se trouvent, atteignent-elles le menu, peuvent-elles fermer le bandeau des cookies, remplir le formulaire de contact et ressortir d'une fenêtre surgissante ? Ce test ne demande ni logiciel ni connaissances techniques. Il vous faut un clavier, dix minutes et un bloc-notes. Cet article vous guide pas à pas, vous propose une liste de contrôle à imprimer et explique comment corriger les problèmes les plus fréquents.
Pourquoi l'accès au clavier compte
Beaucoup de personnes ne touchent jamais une souris. Le clavier, ou un outil qui se comporte comme un clavier, est leur manière de parcourir chaque site qu'elles visitent.
- Les personnes ayant un handicap moteur, comme des tremblements, une paralysie ou des mouvements de la main limités, maîtrisent souvent bien mieux un clavier qu'un petit pointeur à l'écran.
- Les personnes qui utilisent des contacteurs (un ou deux gros boutons, parfois actionnés avec la tête ou le souffle) ou un clavier à l'écran reposent sur le même mécanisme. Le W3C, l'organisation qui élabore les standards du web, explique que ces outils se font passer pour un clavier : ce qui fonctionne au clavier fonctionne aussi avec eux.
- Les personnes qui pilotent leur ordinateur à la voix disent par exemple « clique sur Envoyer » ou « champ suivant ». Selon le W3C, l'accès au clavier aide aussi celles et ceux qui utilisent un site par la parole.
- Les utilisateurs de lecteurs d'écran, des personnes aveugles ou malvoyantes qui se font lire la page par une voix de synthèse, se déplacent dans les pages et les formulaires avec des commandes clavier.
- Les utilisateurs aguerris qui préfèrent simplement le clavier parce que c'est plus rapide, surtout pour remplir de longs formulaires.
L'accès au clavier fait partie des Règles pour l'accessibilité des contenus web (WCAG), la norme internationale publiée par le W3C sur laquelle s'appuient la plupart des règles européennes en matière d'accessibilité. Les exigences de base, « Clavier » et « Pas de piège au clavier », se situent au niveau A, le niveau le plus élémentaire de la norme.
Préparez votre ordinateur
Sous Windows, tous les grands navigateurs vous permettent de passer d'un lien ou d'un bouton à l'autre avec la touche Tab dès le départ. Vous pouvez sauter cette étape.
Sur un Mac, la touche Tab ne saute par défaut qu'entre les zones de texte. Modifiez d'abord deux réglages :
- Ouvrez le menu Apple, choisissez Réglages Système, cliquez sur Clavier dans la barre latérale et activez Navigation au clavier.
- Si vous testez dans Safari, choisissez Safari > Réglages, cliquez sur Avancées et cochez l'option qui permet à la touche Tab de mettre en surbrillance chaque élément d'une page web (en anglais : Press Tab to highlight each item on a webpage). Sans cette option, Safari n'atteint les liens qu'avec Option+Tab.
Dans Chrome sur Mac, une option comparable se trouve dans Paramètres > Apparence : la touche Tab met alors en évidence les liens, et pas seulement les champs de formulaire. Redémarrez le navigateur après avoir modifié ces réglages.
Les six touches à connaître
- Tab avance vers le lien, le bouton ou le champ de formulaire suivant.
- Maj+Tab revient au précédent.
- Entrée suit un lien ou appuie sur un bouton.
- Espace appuie sur un bouton, coche une case et, sur la plupart des pages, fait défiler vers le bas quand rien n'est sélectionné.
- Les flèches passent d'une option à l'autre dans un groupe : boutons radio, liste déroulante, curseur, onglets dans un bloc.
- Échap ferme une fenêtre surgissante, un menu ou une liste déroulante.
Chaque endroit où la touche Tab s'arrête s'appelle un arrêt. Le contour ou la mise en évidence qui montre sur quel arrêt vous vous trouvez s'appelle l'indicateur de focus. L'essentiel de ce test consiste à suivre ces arrêts et à surveiller cet indicateur.
Le test, étape par étape
Choisissez une page importante, par exemple votre page d'accueil, une fiche produit ou votre page de contact. Cliquez une fois dans la barre d'adresse du navigateur, puis appuyez sur Tab et passez en revue les points ci-dessous.
Voyez-vous toujours où vous êtes ?
Chaque arrêt doit avoir un indicateur de focus visible : un contour, un soulignement, un changement de couleur. Si vous appuyez sur Tab et que rien ne semble changer, le focus est parti à un endroit que vous ne voyez pas. C'est un manquement à l'exigence « Visibilité du focus » des WCAG. Repérez aussi les arrêts qui disparaissent derrière un en-tête fixe ou un bandeau de cookies. La version 2.2 des WCAG a ajouté une exigence à ce sujet, « Focus non masqué ».
L'ordre est-il logique ?
Les arrêts doivent suivre la page comme vous la lisez : de haut en bas, de gauche à droite, le menu avant le contenu, les champs d'un formulaire dans l'ordre où ils apparaissent. Si le focus saute de l'en-tête au pied de page puis revient au milieu, on perd le fil.
Y a-t-il un lien « Aller au contenu principal » ?
Sur la plupart des sites bien conçus, la toute première pression sur Tab fait apparaître un lien du type « Aller au contenu principal » ou « Aller au contenu ». Activez-le avec Entrée : le Tab suivant doit arriver dans le contenu principal, pas à nouveau dans le menu. Sans ce lien, une personne au clavier doit traverser tous les éléments du menu sur chaque page.
Les menus et listes déroulantes fonctionnent-ils ?
Ouvrez le menu principal et ses sous-menus avec Entrée ou Espace, parcourez-les avec Tab ou les flèches, et refermez-les avec Échap. Un sous-menu qui ne s'ouvre qu'au survol de la souris est un défaut courant.
Pouvez-vous toujours ressortir ?
Les WCAG appellent cela un piège au clavier : le focus entre dans un bloc, souvent une carte intégrée, une fenêtre de discussion ou une vidéo, et la touche Tab ne vous en fait plus sortir. Si vous êtes bloqué, essayez Échap et Maj+Tab. Si rien n'y fait, c'est un piège.
Les fenêtres surgissantes prennent-elles et rendent-elles le focus ?
Quand une fenêtre surgissante s'ouvre (inscription à une lettre d'information, connexion, visionneuse de photos), le focus doit y entrer. La touche Tab doit rester à l'intérieur tant qu'elle est ouverte, Échap doit la fermer, et le focus doit ensuite revenir au bouton qui l'a ouverte. C'est ainsi que le décrit le guide du W3C.
Pouvez-vous remplir et envoyer un formulaire ?
Remplissez chaque champ, cochez les cases, faites vos choix dans les listes déroulantes et envoyez. Recommencez ensuite avec une erreur volontaire, comme une adresse e-mail sans « @ ». Pouvez-vous atteindre le message d'erreur, et vous dit-il quoi corriger ?
Pouvez-vous fermer le bandeau des cookies ?
Il est souvent la première chose sur la page. Atteignez les boutons avec Tab, choisissez avec Entrée et vérifiez que le bandeau disparaît vraiment.
Carrousels et lecteurs vidéo
Un diaporama qui défile tout seul pendant plus de cinq secondes doit pouvoir être mis en pause ou arrêté, selon l'exigence « Mettre en pause, arrêter, masquer » des WCAG. Vérifiez que vous atteignez ce bouton ainsi que les flèches précédent et suivant. Dans un lecteur vidéo, vérifiez que vous pouvez atteindre la lecture, le volume, les sous-titres et le plein écran, puis quitter le lecteur avec Tab.
Votre liste de contrôle à imprimer
- La première pression sur Tab affiche un lien « Aller au contenu principal », et il fonctionne.
- Chaque arrêt a un indicateur de focus bien visible.
- Aucun arrêt ne disparaît derrière un en-tête fixe, un bouton de discussion ou un bandeau de cookies.
- L'ordre des arrêts suit l'ordre visuel de la page.
- Tout ce que vous pouvez cliquer à la souris, vous pouvez l'atteindre et l'utiliser au clavier.
- Les menus et sous-menus s'ouvrent avec Entrée ou Espace et se ferment avec Échap.
- Vous n'êtes jamais bloqué : Tab ou Échap vous permet toujours d'avancer.
- Les fenêtres surgissantes prennent le focus à l'ouverture, le gardent, se ferment avec Échap et rendent le focus.
- Les formulaires peuvent être remplis et envoyés, et les messages d'erreur sont accessibles et compréhensibles.
- Le bandeau des cookies peut être lu et fermé au clavier.
- Les diaporamas animés peuvent être mis en pause, et leurs boutons sont accessibles.
- Les lecteurs vidéo peuvent être lancés, arrêtés et quittés au clavier.
Que noter quand quelque chose ne va pas
Une remarque comme « le menu ne marche pas » oblige le développeur à chercher. Une note précise lui permet de corriger en quelques minutes. Pour chaque problème, notez trois choses :
- Où : l'adresse de la page et l'endroit sur la page, par exemple « page d'accueil, menu principal, rubrique Services ».
- Ce que vous avez appuyé : les touches dans l'ordre, par exemple « six fois Tab, puis Entrée ».
- Ce qui s'est passé, et ce que vous attendiez : « le sous-menu ne s'est pas ouvert ; je m'attendais à voir les pages de la rubrique Services ».
Une capture d'écran ou un court enregistrement de l'écran aide aussi. Indiquez le navigateur et l'ordinateur utilisés, car Safari sur Mac ne se comporte pas toujours comme Chrome sous Windows.
Comment corriger les problèmes les plus courants
Vous n'avez pas à corriger cela vous-même, mais connaître la cause facilite beaucoup l'échange avec votre développeur ou le support de votre outil de création de site.
Le contour de focus a été supprimé
Les navigateurs dessinent automatiquement un contour de focus. Il arrive que des graphistes le suppriment parce qu'ils le trouvent disgracieux, puis oublient de le remplacer. WebAIM, organisation reconnue en accessibilité rattachée à l'Utah State University, déconseille de supprimer ce contour. La solution consiste à prévoir un contour net, dans votre propre style :
/* À éviter : cache le contour pour tout le monde */
a:focus {
outline: none;
}
/* Mieux : un contour net dès qu'on utilise le clavier */
a:focus-visible {
outline: 3px solid #1a5e3a;
outline-offset: 2px;
}La première règle cache l'endroit où vous vous trouvez. La seconde trace une épaisse ligne verte, légèrement écartée, autour d'un lien chaque fois qu'on l'atteint au clavier. Si vous utilisez un outil de création de site, cherchez un champ de style personnalisé dans les réglages de votre thème.
Un « bouton » qui n'en est pas un
Parfois, un bouton est fabriqué à partir d'un simple bloc qui ne réagit qu'au clic de la souris. Il ressemble à un bouton, mais la touche Tab ne l'atteint pas et Entrée ne fait rien. Un vrai bouton règle le problème, car les navigateurs offrent d'office la prise en charge du clavier aux vrais boutons :
<!-- Ne fonctionne qu'à la souris --> <div class="btn" onclick="openMenu()">Menu</div> <!-- Fonctionne à la souris, au clavier, à la voix et avec un lecteur d'écran --> <button type="button" onclick="openMenu()">Menu</button>
Il en va de même pour les liens : un vrai lien s'atteint avec Tab et se suit avec Entrée ; un texte qui ressemble seulement à un lien, souvent pas.
Ce que les vérifications automatiques voient, et ce qu'elles ne voient pas
Les vérifications automatiques d'accessibilité sont utiles, mais elles ne peuvent pas appuyer sur des touches et juger ce qui se passe. Elles repèrent certaines causes, comme une étiquette manquante sur un champ de formulaire, mais pas si un menu s'ouvre, si le focus reste coincé dans une fenêtre de discussion ou si l'ordre des arrêts a du sens. C'est pourquoi ce test de dix minutes compte, même si votre site réussit une vérification automatique.
Le « second regard de l'IA », proposé en option par ibin, peut vous faire gagner du temps. Il suit l'ordre du clavier dans la page, compte les arrêts et signale les arrêts sans contour visible. Considérez-le comme une liste d'endroits à vérifier d'abord vous-même, pas comme un verdict final.
Essayez sur votre propre site
Commencez aujourd'hui par une seule page : parcourez la liste de contrôle et notez ce que vous trouvez. Ensuite, vérifiez gratuitement cette page avec ibin pour repérer les problèmes que les vérifications automatiques peuvent détecter, avec des images de leur emplacement et des conseils simples pour les corriger. Les guides de correction détaillent les solutions et, en vous connectant avec votre adresse e-mail, vous pouvez faire vérifier gratuitement jusqu'à 200 pages de votre site.
Voyez où en est votre site
Vérifiez gratuitement une page, sans compte. Vous recevez une liste claire de ce qu’il faut corriger en premier, avec des images de l’endroit où se trouve chaque problème.
