Usage et efficacité
Comment rendre utilisable au clavier une expérience conçue pour la souris ?
Rendre une expérience utilisable au clavier consiste à donner accès à ses fonctions, avec des commandes et des repères adaptés. Il n’est généralement pas nécessaire de simuler tous les mouvements de souris. Pour choisir une matière, ouvrir une information ou examiner un objet, la personne doit pouvoir atteindre le même résultat par un autre chemin.
L'essentiel.
Une expérience conçue à la souris devient utilisable au clavier lorsque chaque fonction possède une commande compréhensible et un état perceptible. Il faut traduire le résultat attendu, puis organiser le focus et le parcours sans reproduire chaque geste.
- Identifier les fonctions de chaque geste avant de chercher son équivalent clavier.
- Utiliser des liens, boutons et champs natifs chaque fois qu’ils répondent au besoin.
- Prévoir un focus visible, un ordre cohérent et une sortie pour chaque composant.
- Tester le parcours complet sans souris, avec les mêmes contenus et les mêmes objectifs.
Cette traduction doit être conçue avec l’interface visuelle. Ajouter un contour de focus à la fin ne suffit pas si des informations restent cachées derrière un survol, si une fenêtre ne peut plus être fermée ou si l’ordre des éléments devient incohérent. Le clavier révèle alors des décisions de structure qui concernent l’ensemble de l’expérience.
Partir de la fonction, puis choisir la commande
Une interaction peut mélanger plusieurs choses : déplacer un objet, afficher une fiche et sélectionner une option. Décomposez-la. L’action de déplacer peut être facultative, tandis que la sélection et la consultation doivent rester disponibles.
Le critère WCAG 2.1.1 sur le clavier demande que les fonctionnalités puissent être utilisées par une interface clavier, sans exiger un minutage particulier des frappes, sauf certaines fonctions dont le tracé est essentiel. Le caractère spectaculaire d’une interaction ne constitue pas cette exception.
| Interaction initiale | Fonction à conserver | Traduction possible |
|---|---|---|
| Survol d’une vignette | Lire le titre et la description | Informations visibles au focus ou accessibles par ouverture |
| Glissement d’un objet | Choisir une position ou une option | Boutons, sélecteur ou commandes directionnelles adaptées |
| Clic sur un détail 3D | Consulter une caractéristique | Liste de caractéristiques reliée à la scène |
| Fermeture d’un panneau | Retrouver le contexte précédent | Bouton de fermeture et restitution du focus |
Ces solutions doivent être jugées selon le composant. Transformer chaque élément décoratif en étape de tabulation ralentirait inutilement la visite. Le clavier doit rencontrer les actions et informations pertinentes dans un ordre qui reste compréhensible.
Faire du focus un véritable repère de direction artistique
Le focus indique l’élément actuellement prêt à recevoir une action. Son apparence doit fonctionner sur les fonds clairs, sombres et animés. Un contour cohérent avec la marque peut être dessiné, à condition qu’il reste perceptible et ne disparaisse pas derrière un masque ou une zone coupée.
L’ordre du parcours mérite la même attention. Une composition asymétrique peut présenter des éléments dans un arrangement visuel différent de leur ordre dans le document. Il faut vérifier que la succession reste logique lorsque l’on avance au clavier, notamment après un changement de largeur.
Pour les composants complexes, le guide de modèles ARIA du W3C fournit des références de comportement et de sémantique. Il aide à éviter des conventions inventées pour un onglet, une boîte de dialogue ou un carrousel. Ces modèles demandent une mise en œuvre et des tests ; les copier partiellement ne suffit pas à garantir l’accessibilité.
Exemple pédagogique : une bibliothèque de matières interactive
Prenons un showroom fictif où le visiteur déplace le curseur sur un mur de matières. Chaque zone s’agrandit et fait apparaître des informations. Dans une première version, aucune de ces zones n’est atteignable au clavier, et les textes n’existent que pendant le survol.
La version révisée utilise une liste de matières avec des boutons nommés. Le focus révèle la même information essentielle que le survol. Une activation ouvre un panneau détaillé. La scène reste présente, mais elle accompagne un état explicite : la matière sélectionnée est indiquée dans le panneau et dans la liste.
Même fonction, plusieurs commandes
- À la sourisLe survol présente la matière ; le clic ouvre sa fiche.
- Au clavierLe focus identifie la matière ; une activation ouvre la même fiche.
- Après fermetureLe contexte et le point de reprise sont conservés dans les deux parcours.
À la fermeture du panneau, le focus revient sur la matière qui l’a ouvert. Le visiteur peut alors continuer son exploration. La production doit également traiter le cas où cette matière a disparu après un filtrage : un autre point de reprise logique doit être prévu, plutôt qu’un focus perdu dans la page.
Un protocole de contrôle sans souris
Commencez depuis le haut de la page et éloignez la souris. Parcourez les éléments avec Tabulation puis revenez avec Majuscule et Tabulation. Activez les commandes, ouvrez les panneaux, changez les options et envoyez un formulaire. Vérifiez à chaque étape que l’élément actif se voit et que son résultat se comprend.
Testez ensuite les situations difficiles : un menu ouvert au-dessus d’une scène, un contenu chargé après l’action, une erreur de formulaire et un changement d’orientation. Le protocole doit observer le comportement réel, pas seulement compter les éléments techniquement focalisables.
Une fiche de défaut peut contenir le point de départ, la touche utilisée, le résultat attendu et le résultat obtenu. Par exemple : « Après fermeture de la fiche, le focus revient au début du document au lieu de la matière choisie. » Cette description permet une correction précise et un contrôle reproductible.
Une vérification au clavier ne couvre cependant pas toute l’accessibilité. Les libellés, les annonces, les contrastes et les technologies d’assistance demandent d’autres contrôles. Elle constitue un parcours de recette essentiel, à intégrer régulièrement pendant la production.
Questions fréquentes
Faut-il afficher une aide pour toutes les touches ?
Les composants ordinaires doivent d’abord suivre des conventions reconnues. Une aide devient utile lorsqu’une interaction spécialisée ajoute des commandes qui ne sont pas évidentes. Elle doit être accessible depuis le composant, concise et complétée par des commandes visibles lorsque cela facilite l’usage.
Une commande activable avec Tabulation est-elle suffisante ?
Non. Elle doit aussi avoir un nom compréhensible, un comportement approprié et un état perceptible. La personne doit pouvoir l’activer, comprendre le résultat puis poursuivre son parcours. Un élément atteignable mais invisible ou impossible à quitter reste un problème d’utilisation.
Doit-on supprimer les interactions à la souris ?
Non. Elles peuvent rester disponibles et conserver leur richesse. L’enjeu est de donner accès aux mêmes fonctions essentielles par une autre modalité, puis de maintenir les états synchronisés. Cette approche permet à chacun d’utiliser le moyen de commande adapté à sa situation.
Sources
LVX : intégrer les commandes à l’expression du site
Dans un projet créatif, LVX peut faire du parcours clavier un sujet de conception visuelle et fonctionnelle : apparence des repères, ordre des informations, ouverture des panneaux et retour au contexte. Les interactions sont décrites par leur fonction avant d’être déclinées selon les modes de commande. Cette approche permet de discuter très tôt des équivalences nécessaires avec le développement. La finition ne se limite alors plus à ce qui se voit lors d’une démonstration à la souris ; elle couvre aussi la manière dont le visiteur peut réellement agir. Découvrir notre approche.
