Tester au clavier et au lecteur d'écran, pas à pas
Tests au clavier et au lecteur d'écran
Tester au clavier et au lecteur d'écran, pas à pas | We.Inc
Un test manuel pas à pas pour n'importe quel site : vérifications au clavier, commandes NVDA et VoiceOver, un lien d'évitement vers le contenu, du CSS :focus-visible et une liste de contrôle à cocher.
Pour tester un site au clavier, rangez la souris et utilisez Tab, Shift+Tab, Enter, Space et les flèches pour atteindre et actionner chaque élément, en surveillant un indicateur de focus visible et un ordre logique. Activez ensuite un lecteur d'écran, NVDA sous Windows ou VoiceOver sur Mac, et vérifiez que les titres, liens, boutons et champs de formulaire sont annoncés clairement.
Critères WCAG 2.2 couverts par ces tests
Critère
Niveau
Ce que vous vérifiez
2.1.1 Clavier
Tout fonctionne sans souris
2.1.2 Pas de piège au clavier
Le focus peut toujours repartir ailleurs
2.4.1 Contourner des blocs
Un moyen de sauter la navigation répétée
2.4.3 Parcours du focus
L'ordre de tabulation suit le sens de la page
2.4.7 Visibilité du focus
AA
Vous voyez toujours où se trouve le focus
2.4.11 Focus non masqué (minimum)
AA
Les barres fixes ne cachent pas l'élément qui a le focus
4.1.2 Nom, rôle et valeur
Les contrôles annoncent ce qu'ils sont et leur état
Les outils automatiques repèrent les textes alternatifs manquants et les contrastes faibles, mais ils ne savent pas dire si un menu s'ouvre avec Enter ni si un utilisateur de lecteur d'écran comprend un formulaire. Cette page déroule le passage manuel dans l'ordre, avec une zone d'entraînement qui montre précisément quel élément a le focus et une liste de contrôle qui garde votre progression.
Ouvrez la page à tester dans un autre onglet. Gardez cette liste de contrôle à côté.
Commencez par les étapes au clavier en cochant chaque point. Le compteur de progression se met à jour au fil de l'eau.
Utilisez la zone d'entraînement ci-dessous pour répéter : parcourez-la avec Tab et l'indicateur nomme l'élément qui a le focus.
Lancez ensuite un lecteur d'écran avec les commandes des tableaux et refaites le parcours à l'écoute.
Copiez le code du lien d'évitement et du style de focus pour corriger les défauts les plus fréquents.
Testez les parcours clés, pas chaque page : le menu, une recherche, le formulaire principal, le paiement ou la réservation, et toute boîte de dialogue.
Zoomez le navigateur à 200 pour cent pendant la tabulation. Les indicateurs de focus et les en-têtes fixes se chevauchent souvent aux grandes tailles.
Si vous supprimez le contour par défaut, remplacez-le dans la même règle. Ne laissez jamais outline: none seul.
Utilisez de vrais éléments button et a. Une div cliquable est ignorée par Tab et annoncée comme du simple texte.
Écoutez un formulaire entier au lecteur d'écran avant de modifier quoi que ce soit. Les libellés manquants s'entendent tout de suite.
Questions fréquentes
Avec quel lecteur d'écran dois-je tester ?
Si possible, avec celui de vos visiteurs. NVDA est gratuit sous Windows, proposé par NV Access, et VoiceOver est intégré à chaque Mac et iPhone. Si l'essentiel de votre trafic vient des téléphones, ajoutez un passage avec VoiceOver sur iPhone ou TalkBack sur Android.
Comment démarrer et arrêter NVDA et VoiceOver ?
Une fois installé, NVDA démarre avec Control+Alt+N, et Insert+Q le quitte. Sur Mac, Command+F5 active et désactive VoiceOver. Appuyer sur Control seul fait taire NVDA en pleine phrase.
Qu'est-ce qu'un lien d'évitement vers le contenu ?
C'est le premier lien de la page, généralement caché jusqu'à ce qu'il reçoive le focus, qui mène directement au contenu principal. Les utilisateurs du clavier n'ont alors plus à tabuler dans toute la navigation sur chaque page. Les WCAG le citent comme une technique suffisante pour 2.4.1 Contourner des blocs, aux côtés des repères et des titres.
Faut-il utiliser :focus ou :focus-visible ?
:focus-visible laisse le navigateur décider quand un indicateur de focus est utile : les utilisateurs du clavier le voient, alors qu'un clic de souris sur un bouton n'en affiche généralement pas. Selon MDN, il est largement pris en charge depuis mars 2022. Stylez :focus-visible et gardez un indicateur visible pour chaque élément interactif.
Qu'est-ce qu'un piège au clavier ?
Un endroit où le focus entre sans pouvoir ressortir au clavier, comme un lecteur intégré ou une boîte de dialogue personnalisée qui avale Tab. Les boîtes de dialogue modales doivent garder le focus à l'intérieur tant qu'elles sont ouvertes, mais Escape ou un bouton de fermeture doit toujours permettre au visiteur d'en sortir.
Mode navigation et mode formulaire
Les lecteurs d'écran lisent les pages web dans un tampon virtuel où une simple lettre sert de raccourci : H pour le titre suivant, K pour le lien suivant dans NVDA. Quand vous arrivez dans un champ de texte, le lecteur passe en mode formulaire pour que les lettres soient saisies. NVDA+Space bascule manuellement entre les deux.
C'est pourquoi un widget personnalisé qui ne réagit qu'aux flèches peut sembler cassé. En mode navigation, le lecteur peut intercepter ces touches avant que votre script ne les reçoive : utilisez des éléments natifs ou suivez les modèles des ARIA Authoring Practices.
À quoi ressemble un bon rendu sonore
Chaque contrôle doit être annoncé avec un nom, un rôle et, si besoin, un état : Rechercher, zone d'édition ; Menu, bouton, réduit ; S'abonner, case à cocher, non cochée. S'il manque l'un des trois, corrigez le balisage avant d'ajouter de l'ARIA.
Les titres doivent former un plan que l'on pourrait lire comme une table des matières. Affichez la liste des titres dans la liste des éléments de NVDA ou dans le rotor de VoiceOver et vérifiez qu'elle a du sens à elle seule.
Consigner vos constats
Décrivez chaque problème avec la page, les étapes, ce que vous attendiez et ce qui s'est passé, plus le critère non respecté. Ce format permet à un développeur de le reproduire sans deviner.
Retestez après les corrections avec les mêmes étapes. Les problèmes de focus, en particulier, ont tendance à revenir quand un en-tête ou une modale change de style.
Touches pour tester au clavier seul
Comportement clavier standard du navigateur
Touche
Ce qu'elle doit faire
Tab / Shift+Tab
Aller à l'élément focalisable suivant ou précédent
Enter
Suivre un lien ou activer un bouton
Space
Activer un bouton, cocher une case, faire défiler la page quand rien n'a le focus
Flèches
Se déplacer dans les groupes de boutons radio, les listes déroulantes, les menus et les onglets
Escape
Fermer une boîte de dialogue, un menu ou une fenêtre contextuelle
Commandes NVDA (Windows, disposition ordinateur de bureau)
La touche NVDA est Insert par défaut ; le guide de l'utilisateur autorise aussi Caps Lock. Les raccourcis à une lettre fonctionnent en mode navigation.
D'après le guide de l'utilisateur de NVDA
Action
Touches
Démarrer NVDA
Control+Alt+N
Interrompre la parole
Control
Lire à partir d'ici (tout dire)
NVDA+Down Arrow
Basculer entre mode navigation et mode formulaire
NVDA+Space
Liste des éléments (liens, titres, repères)
NVDA+F7
Titre / repère / lien suivant
Champ de formulaire / bouton suivant
Tableau / liste suivant
Quitter NVDA
NVDA+Q
Commandes VoiceOver (Mac)
VO désigne le modificateur VoiceOver : Control et Option maintenues ensemble, ou Caps Lock seul.
D'après le guide d'utilisation de VoiceOver d'Apple
Action
Touches
Activer ou désactiver VoiceOver
Command+F5
Ouvrir le rotor
VO+U
Changer de liste du rotor (titres, liens, etc.)
Flèche gauche ou droite dans le rotor
Parcourir la liste choisie
Flèche haut ou bas dans le rotor
Corrections des défauts les plus fréquents
Lien d'évitement vers le contenu
Cliquez dans le résultat, puis appuyez sur Tab. Le lien n'apparaît que lorsqu'il a le focus, et sa cible est l'élément main.
Un indicateur de focus visible seulement au clavier
Tabulez jusqu'aux boutons du résultat. L'indicateur décalé reste à distance du bord du bouton, et les clics de souris le laissent généralement caché.
Éviter que les éléments focalisés passent sous un en-tête fixe
scroll-padding-top réserve de l'espace en haut quand le navigateur fait défiler un élément focalisé ou une ancre jusqu'à l'écran.
Clavier seul
Appuyez une fois sur Tab après le chargement de la page
Un lien d'évitement apparaît et fonctionne avec Enter
Parcourez toute la page avec Tab
Chaque lien, bouton et champ est atteint, dans l'ordre de lecture
Observez l'indicateur de focus à chaque arrêt
Il est toujours visible et jamais caché sous un en-tête fixe
Ouvrez le menu et les listes déroulantes
Enter ou Space les ouvre ; Escape les ferme et rend le focus
Utilisez les widgets personnalisés
Onglets, curseurs et carrousels répondent aux touches attendues
Ouvrez et fermez une boîte de dialogue
Le focus y entre, y reste, puis revient au déclencheur ensuite
Remplissez et envoyez le formulaire principal
Les erreurs sont atteignables et le focus arrive à un endroit utile
Essayez de rester bloqué
Aucun contenu intégré ni widget ne piège le focus
Lecteur d'écran
Écoutez le titre de la page et le premier titre
Ils indiquent sur quelle page vous êtes
Ouvrez la liste des titres
Les titres forment un plan cohérent avec un seul h1
Ouvrez la liste des repères
Les régions bannière, navigation, principale et pied de page sont présentes
Parcourez les liens
Chaque texte de lien a du sens hors contexte
Visitez chaque champ de formulaire
Chaque champ annonce un libellé, son type et s'il est obligatoire
Déclenchez un message d'erreur et un message de succès
Les deux sont annoncés sans toucher à la souris
Vérifiez les images
Les images informatives ont un texte alternatif ; les décoratives restent muettes
Basculez un bouton ou une case à cocher
Le nouvel état, par exemple développé ou coché, est annoncé
Liste de contrôle des tests
Réinitialiser
Cochez chaque étape au fil de vos tests. Vos coches restent sur cette page uniquement.
{n} étapes sur {total} terminées
Aucun élément de la page n'a le focus
champ {t}
aucun nom accessible
Entrez dans la zone avec Tab pour commencer
Zone d'entraînement au focus
Parcourez ces contrôles avec Tab. L'indicateur nomme l'élément qui a le focus en ce moment.