HTML Academy · Leçon

Tests avec des lecteurs d’écran

Utilisez VoiceOver et NVDA pour vérifier vos implémentations ARIA.

Tests avec des lecteurs d’écran est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Pourquoi tester avec des lecteurs d’écran ?

Les outils automatisés ne détectent que 30 à 40 % des problèmes d’accessibilité. Les tests réels avec un lecteur d’écran révèlent les problèmes que les vérifications automatisées ne détectent pas :

Ordre de lecture déroutant
Annonces ARIA peu utiles
Gestion du focus absente
Modèles d’interaction déroutants

VoiceOver sur Mac

VoiceOver est intégré à macOS — aucune installation n’est nécessaire :

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver sur iOS

Testez l’expérience du lecteur d’écran mobile avec VoiceOver sur iPhone/iPad :

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA sur Windows

NVDA est un lecteur d’écran gratuit et libre pour Windows :

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Liste de vérification des tests avec un lecteur d’écran

Éléments à vérifier avec un lecteur d’écran :

Le titre de la page est annoncé lors du chargement
Les titres créent une structure de navigation logique
Toutes les images possèdent un texte alt pertinent ou vide
Tous les champs de formulaire possèdent des libellés
Les boutons et les liens possèdent des noms descriptifs
Le piège de focus de la fenêtre modale fonctionne correctement
Les mises à jour du contenu dynamique sont annoncées

Bugs courants des lecteurs d’écran

Problèmes que les tests automatisés ne détectent pas :

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Tests d’abord au clavier

Avant d’utiliser un lecteur d’écran, testez d’abord uniquement au clavier :

Débranchez votre souris ou votre pavé tactile
Parcourez toute la page avec la touche Tabulation uniquement
Vérifiez que chaque élément interactif est accessible
Vérifiez que toutes les actions peuvent être effectuées au clavier

Outils automatisés de test de l’accessibilité

Complétez les tests manuels avec des outils automatisés :

axe DevTools — extension Chrome ; outil de vérification automatisée le plus précis
WAVE — wavebooth.com ; surimpression visuelle sur la page
Lighthouse — Chrome DevTools ; audit des performances et de l’accessibilité
pa11y — outil CLI ; idéal pour les chaînes d’intégration et de déploiement continus

Référence des modèles ARIA

Le W3C ARIA Authoring Practices Guide (APG) fournit des implémentations de référence :

Accordéon, alerte, boîte de dialogue d’alerte
Fil d’Ariane, bouton, carrousel
Case à cocher, boîte combinée, boîte de dialogue
Divulgation, Feed, grille
Liste de sélection, menu, barre de menu
Onglet, info-bulle, vue arborescente

URL : w3.org/WAI/ARIA/apg/

Intégration continue de l’accessibilité

Intégrez les tests d’accessibilité à votre flux de travail :

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Synthèse des tests

Stratégie complète de test de l’accessibilité :

Conception — vérifiez le contraste des couleurs et la taille des cibles tactiles
Développement — testez au clavier et lancez une analyse automatisée avec axe
Révision — testez avec un lecteur d’écran (VoiceOver + NVDA)
CI/CD — utilisez pa11y ou axe dans une chaîne automatisée
Production — utilisez Lighthouse et effectuez des vérifications manuelles ponctuelles

Vérification rapide

Quel pourcentage des problèmes d’accessibilité les outils automatisés peuvent-ils détecter de manière fiable ?

Récapitulatif : tests avec un lecteur d’écran

Éléments essentiels des tests :

VoiceOver (Mac/iOS) et NVDA (Windows) sont gratuits et indispensables
Testez d’abord uniquement au clavier, puis ajoutez le lecteur d’écran
Outils automatisés : axe, WAVE, Lighthouse, pa11y
Les tests automatisés ne détectent qu’environ 30 à 40 % des problèmes
Consultez les modèles APG de référence pour des implémentations ARIA correctes

Questions Fréquemment Posées

La leçon « Tests avec des lecteurs d’écran » est-elle gratuite ?

Oui — le texte complet de « Tests avec des lecteurs d’écran » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tests avec des lecteurs d’écran » ?

Utilisez VoiceOver et NVDA pour vérifier vos implémentations ARIA. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Tests avec des lecteurs d’écran » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

`aria-expanded` et `aria-controls` pour les bascules
`aria-selected` et modèles d’onglets
Régions dynamiques : `aria-live`, `aria-atomic`, `aria-relevant`
Tests avec des lecteurs d’écran

← Retour à HTML Academy