Leçon 6 / 6
Leçon 06 · Partie 2 — Appliquer

Tester l'accessibilité

Pourquoi tester ?

Tu peux connaître toutes les règles WCAG par cœur et quand même avoir des erreurs dans ton code. Typo dans un alt, contraste légèrement insuffisant, un div onclick qui a échappé à la revue. Les outils de test automatiques attrapent ces erreurs en quelques secondes.

Mais les outils automatiques ne voient pas tout. Ils peuvent détecter environ 30 à 40% des problèmes d'accessibilité. Le reste nécessite des tests manuels : navigation au clavier, lecteur d'écran. C'est ce qu'on fait dans cette leçon.

💡

Une bonne approche de test : WAVE pour détecter les erreurs automatiques, puis navigation au clavier (débranche la souris 5 minutes), puis NVDA pour entendre comme un malvoyant.

WAVE : l'extension à installer en premier

WAVE (Web Accessibility Evaluation Tool) est une extension gratuite pour Chrome et Firefox, développée par WebAIM. Elle analyse l'accessibilité de n'importe quelle page web en un seul clic.

🌊

WAVE pour Chrome

Disponible dans le Chrome Web Store. Recherche "WAVE Evaluation Tool".

chrome.google.com/webstore
🦊

WAVE pour Firefox

Disponible dans les extensions Firefox. Recherche "WAVE Evaluation Tool".

addons.mozilla.org

Installer WAVE (étape par étape)

  1. Ouvre Chrome (ou Firefox)
  2. Va sur chrome.google.com/webstore (ou addons.mozilla.org pour Firefox)
  3. Recherche "WAVE Evaluation Tool"
  4. Clique sur "Ajouter à Chrome" (ou "Ajouter à Firefox")
  5. Confirme l'installation
  6. L'icône WAVE (vague bleue) apparaît dans ta barre d'extensions
WAVE — Interface

Comment utiliser WAVE :

1. Va sur la page que tu veux tester

2. Clique sur l'icône WAVE dans tes extensions

3. WAVE injecte des icônes colorées sur ta page

4. Un panneau latéral s'ouvre avec le résumé

Icônes WAVE :

🔴 Rouge = erreur d'accessibilité (à corriger)

🟡 Jaune = alerte (à vérifier manuellement)

🟢 Vert = élément structurel correct

🔵 Bleu = attributs ARIA détectés

Lire les résultats WAVE

Le panneau latéral WAVE affiche plusieurs onglets :

  • Summary — Vue d'ensemble. Nombre d'erreurs, alertes, éléments structurels.
  • Details — Liste détaillée de chaque problème trouvé. Clique sur chaque item pour voir l'élément dans la page.
  • Reference — Explication du problème sélectionné avec les critères WCAG correspondants.
  • Structure — Vue de la structure sémantique (titres, landmarks, listes).
  • Contrast — Liste tous les éléments avec un contraste insuffisant.
✅

Commence toujours par l'onglet Errors. Les alertes demandent un jugement humain (WAVE ne peut pas savoir si un alt est utile ou non), mais les erreurs sont des problèmes certains. Zéro erreur rouge = bon point de départ.

Erreurs courantes détectées par WAVE

🖼️

Missing alt text

Image sans attribut alt. L'une des erreurs les plus fréquentes. À corriger systématiquement.

🎨

Very low contrast

Ratio de contraste insuffisant. L'onglet Contrast liste tous les éléments concernés avec leur ratio exact.

📝

Empty form label

Champ de formulaire sans label associé. Invisible pour les lecteurs d'écran.

🔗

Empty link

Lien sans texte ni alt. Un icône dans un lien sans aria-label.

📋

Skipped heading level

Saut dans la hiérarchie des titres (h1 → h3 sans h2). Alerte à vérifier.

🔘

Missing form label

Input sans label. Très fréquent dans les formulaires où le placeholder remplace le label.

NVDA : le lecteur d'écran gratuit pour Windows

NVDA (NonVisual Desktop Access) est un lecteur d'écran gratuit et open source pour Windows. C'est l'outil utilisé par des millions de personnes malvoyantes dans le monde. Tester avec NVDA te donne une expérience réelle de ce que vivent tes utilisateurs.

Télécharge NVDA sur nvaccess.org. C'est gratuit, une donation est suggérée.

Utiliser NVDA pour tester

Premiers pas avec NVDA :

1. Installe NVDA (nvaccess.org, gratuit)

2. Lance NVDA — il lit immédiatement ce qu'il voit

3. Ouvre ton navigateur et ta page à tester

4. Utilise Tab pour naviguer et écoute ce que NVDA annonce

Ce que tu dois entendre :

→ "Lien : Accueil" (pas "lien : index.html")

→ "Bouton : Valider le formulaire" (pas juste "bouton")

→ "Image : Chat roux sur un canapé" (pas le nom du fichier)

→ "Navigation principale" (grâce à <nav>)

⚠️

La première fois que tu utilises NVDA, ferme-le avec Insert+Q (ou NVDA+Q). Pour les Mac, VoiceOver est intégré : active avec Cmd+F5. Ne panique pas si c'est déroutant au début — commence juste par naviguer au Tab et écouter.

Checklist pratique avant mise en ligne

Voici une checklist rapide à parcourir avant chaque mise en ligne :

Checklist accessibilité

Structure

☐ Une seule balise <h1> par page

☐ Hiérarchie des titres logique (pas de saut h1→h3)

☐ Balises sémantiques utilisées (<nav>, <main>, <footer>)

☐ Skip link présent en haut de page

Images

☐ Toutes les images ont un attribut alt

☐ Images décoratives : alt="" vide

☐ Boutons icônes : aria-label présent

Couleurs

☐ Contraste texte/fond ≥ 4.5:1 (texte normal)

☐ Information non transmise par la couleur seule

☐ Liens distinguables du texte normal (pas uniquement par couleur)

Clavier

☐ Tous les éléments interactifs atteignables au Tab

☐ Focus visible sur tous les éléments focusables

☐ Pas de outline: none global

☐ Ordre de focus logique

Formulaires

☐ Chaque input a un <label> associé

☐ Messages d'erreur clairs et identifiables

✅

Commence par WAVE sur chaque nouvelle page. Corrige toutes les erreurs rouges. Passe ensuite à la navigation au clavier 5 minutes. C'est 90% du boulot d'accessibilité fait en peu de temps.

// À retenir
  • WAVE = extension Chrome/Firefox gratuite. Un clic pour détecter les erreurs d'accessibilité.
  • Commence par les erreurs rouges. Zéro erreur rouge = bonne base.
  • NVDA = lecteur d'écran gratuit Windows (nvaccess.org). VoiceOver = intégré macOS/iOS (Cmd+F5).
  • Test clavier = 5 min sans souris. Si tu te perds, quelqu'un d'autre aussi.
  • Les outils automatiques détectent ~30-40% des problèmes. Le reste nécessite des tests manuels.