Chapitre 5.4 — Utiliser un lecteur d’écran

⏱️ TL;DR — Tu ne peux pas coder accessible sans écouter ce que tu produis. Bonne nouvelle : tu as déjà un lecteur d’écran sous la main. Sur Windows, installe NVDA (gratuit) ; sur Mac, VoiceOver est intégré (Cmd+F5). Chacun a une touche de modification (la « touche NVDA » = Insert ; les « touches VO » = Control+Option) et une poignée de commandes suffit pour tester : tout lire, élément suivant, sauter par titres, par landmarks, par champs. Ce chapitre te donne le kit de démarrage et une checklist de premier test. C’est le pont vers la Partie 14.

🎯 Objectifs

• Démarrer un lecteur d’écran : NVDA sur Windows, VoiceOver sur Mac.
• Comprendre la touche de modification propre à chaque lecteur.
• Connaître les commandes de base : lire, élément suivant, par titres/landmarks/formulaires.
• Dérouler une checklist de premier test sur un parcours réel.
• Savoir quand ce test rejoint la stratégie globale de la Partie 14.

Pourquoi tester à l’oreille

Les DevTools te montrent l’arbre (chapitre 5.2), mais seuls tes oreilles te disent ce que l’expérience donne vraiment : l’ordre des annonces, les répétitions pénibles, un bouton sans nom, un piège au clavier, une info « visible » jamais lue. Cinq minutes de test réel valent des heures de supposition. Tu n’as pas besoin d’être expert : tu dois juste parcourir ton parcours comme le ferait un utilisateur, à l’aveugle si tu oses fermer les yeux.

♿ Côté utilisateur — La première fois, la voix va très vite et tu ne comprends rien : c’est normal. Un utilisateur régulier écoute à 300-400 mots/minute. Baisse la vitesse au début, prends l’habitude d’arrêter la parole (une touche) et de relire ligne à ligne. En quelques séances, tu « lis à l’oreille » sans effort — et tu entends immédiatement ce qui cloche dans tes pages.

Démarrer avec NVDA (Windows)

NVDA est gratuit et open source. Télécharge-le sur le site de NV Access, installe-le. À l’installation, tu peux créer un raccourci pour le lancer avec Ctrl+Alt+N.

La touche NVDA (le modificateur) est par défaut Insert (tu peux ajouter Verr. Maj / Caps Lock en mode portable). Dans ce cours, « NVDA » dans un raccourci = cette touche. NVDA lit une page en mode navigation ; il bascule en mode formulaire au focus d’un champ (chapitre 5.1). NVDA+Espace bascule les deux modes manuellement.

Démarrer avec VoiceOver (Mac)

VoiceOver est intégré à macOS : rien à installer. Active-le avec Cmd+F5 (même raccourci pour le couper). Un premier lancement propose un excellent tutoriel guidé (Quick Start) — fais-le une fois.

Les touches VO (le modificateur de VoiceOver) sont Control+Option, pressées ensemble. Sur le web, teste VoiceOver avec Safari. L’outil-clé est le rotor (VO+U) : il ouvre un sélecteur d’éléments (titres, liens, landmarks, champs) pour naviguer d’un coup.

⚠️ Piège — Ne teste pas au lecteur d’écran avec un mauvais couple navigateur. VoiceOver donne son vrai comportement sous Safari ; NVDA sous Firefox ou Chrome. Tester VoiceOver sous Chrome ou NVDA sous un navigateur exotique te fera diagnostiquer des bugs qui n’existent que dans cette combinaison — et rater ceux que vivent tes utilisateurs. Un rappel des couples recommandés est au chapitre 5.1.

Checklist « premier test » d’un parcours

Prends un parcours concret (ex. « s’inscrire », « reprendre un cours ») et déroule ça, lecteur d’écran allumé, sans souris :

1. Le titre de la page est-il annoncé et parlant en arrivant ? (<title> et <h1>)
2. La structure : en sautant par titres (H / VO+Cmd+H), obtiens-tu un plan logique et hiérarchisé de la page ?
3. Les landmarks : <nav>, <main> sont-elles présentes et nommées quand il y en a plusieurs ?
4. Chaque élément interactif a un nom : les boutons et liens s’annoncent-ils avec un libellé clair (pas « bouton », « lien », « image » tout court, pas dix « Voir » identiques) ?
5. Les champs de formulaire annoncent-ils leur label, leur état (requis, erreur) et l’aide associée ?
6. L’ordre de lecture suit-il un ordre logique (celui du DOM), sans surprise par rapport au visuel ?
7. Rien d’invisible n’est lu en trop (contenu masqué mal fait), et rien de visible n’est oublié (info portée par la seule couleur ou position) ?
8. Le focus est visible et jamais piégé : peux-tu tout atteindre et tout quitter au clavier (voir Partie 4) ?

Si les huit points passent sur ton parcours principal, tu es déjà loin devant la moyenne. Ce test manuel complète — sans remplacer — les outils automatiques vus en Partie 14.

💡 Réflexe — Teste un parcours de bout en bout, pas des composants isolés. Un bouton parfait dans le vide peut devenir illisible dans le flux réel (annoncé après dix liens identiques, ou après un bloc masqué bavard). L’expérience se juge en contexte, du premier au dernier écran de la tâche.

🧭 Sur A11yLearn — Exercice fondateur du cours : parcours le tableau de bord d’A11yLearn au lecteur d’écran, yeux fermés. Lance NVDA (ou VoiceOver), ouvre la liste des titres (NVDA+F7 ou le rotor VO+U), et essaie d’atteindre « Reprendre mon cours » sans la souris. La première fois, on se perd : titres absents, boutons « Continuer » indistincts, carte cliquable muette. Note chaque friction : c’est ta feuille de route de correctifs pour toute la suite. On refera ce parcours après chaque partie pour mesurer le progrès à l’oreille.

✏️ Exercices

Exercice 1 — Ton premier parcours. Sur n’importe quelle page (la tienne ou un site connu), lance ton lecteur d’écran et, sans souris, ouvre la liste des titres puis saute directement à la zone de contenu principale. Note : y a-t-il des titres ? Une landmark main ? Décris ce que tu entends.

Exercice 2 — Le bouton anonyme. Au lecteur d’écran, tu tombes sur un contrôle annoncé juste « bouton », sans nom. Cite deux commandes qui t’ont permis de le repérer, et où tu regarderais dans le code pour comprendre.

🧠 Quiz de révision

Chapitre suivant : Contenu masqué (sr-only) — les quatre façons de masquer du contenu et laquelle choisir selon que tu veux le cacher à l’œil, au lecteur d’écran, ou aux deux.