Aller au guide d’utilisation
screen-reader-testingpar Seth Hobson

Screen Reader Testing Skill.

Un skill Claude Code et Codex pour la revue de design : teste les applications web avec les lecteurs d'écran VoiceOver, NVDA et JAWS.

  • Revue de conception et accessibilité
  • Rapport de revue
wshobson/agents · plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.mdSKILL.md
--- name: screen-reader-testing description: Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. --- ## When to Use This Skill ## Core Concepts ## VoiceOver (macOS) ## VoiceOver Testing Checklist ## NVDA (Windows) ## NVDA Test Script
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 12 020 caractères au total

01 Ce qu'il fait

Ce que fait le skill screen-reader-testing dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Teste des applications web avec les lecteurs d'écran VoiceOver, NVDA, JAWS, TalkBack et Narrator sur macOS, Windows, iOS et Android. Valide la compatibilité avec les lecteurs d'écran, débogue les problèmes de technologies d'assistance et garantit des implémentations ARIA correctes grâce à des tests pratiques avec des lecteurs d'écran réels.

Couvre la navigation, les formulaires, les annonces de contenu dynamique, la gestion du focus et les fenêtres modales. Fournit des commandes spécifiques à chaque plateforme, des listes de contrôle de test et des exemples de code pour les schémas d'accessibilité courants. Insiste sur les tests dans différents modes de lecteur d'écran (navigation, focus, application) et privilégie le HTML sémantique avec ARIA en enrichissement complémentaire.

Ce qu'il produit

  • Liste de contrôle de test VoiceOver couvrant le chargement de page, la navigation, les liens, les formulaires, le contenu dynamique et les tableaux
  • Script de test NVDA avec instructions étape par étape pour le chargement initial, les repères, les titres, les formulaires, les éléments interactifs et le contenu dynamique
  • Exemples de code HTML présentant des patterns accessibles et des correctifs pour des problèmes courants : boutons sans libellé, contenu dynamique non annoncé et erreurs de formulaire
  • Code JavaScript pour la gestion du focus, incluant les fenêtres modales, le piégeage du focus et la navigation au clavier dans les interfaces à onglets
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Tester avec les principaux lecteurs d'écran par plateforme

    Utilisez NVDA avec Firefox sur Windows (31 % d'usage), VoiceOver avec Safari sur macOS et iOS (15 % d'usage), JAWS avec Chrome (40 % d'usage), TalkBack sur Android (10 % d'usage) et Narrator avec Edge (4 % d'usage).

  2. 02
    Naviguer à l'aide de commandes spécifiques au lecteur d'écran

    Exécutez des commandes telles que VO+Flèche droite pour la navigation par élément de VoiceOver, H pour les sauts de titre de NVDA, Insert+F7 pour les listes de liens de JAWS et un balayage à deux doigts pour le défilement de TalkBack.

  3. 03
    Tester en modes navigation et focus

    Vérifiez que les lecteurs d'écran basculent correctement entre le mode navigation pour lire le contenu et le mode focus pour interagir avec les contrôles de formulaire, en surveillant les annonces de changement de mode.

  4. 04
    Valider la structure sémantique et ARIA

    Vérifiez que les titres sont détectables via le rotor ou la liste des éléments, que les repères sont correctement étiquetés, que les régions live annoncent les mises à jour, et que les rôles tels que dialog, tab et progressbar sont correctement implémentés.

  5. 05
    Vérifier la gestion du focus et l'interaction au clavier

    Assurez-vous que le focus se déplace vers les erreurs après la soumission d'un formulaire, que les fenêtres modales piègent correctement le focus et le restituent à la fermeture, et que les interfaces à onglets répondent aux flèches, à Home et à End.

  6. 06
    Tester les annonces de contenu dynamique

    Déclenchez des mises à jour de contenu et vérifiez que role="status" avec aria-live="polite" annonce les changements après la parole en cours, tandis que role="alert" interrompt immédiatement.

02 Trouvez celui qui vous convient

Quand utiliser le skill screen-reader-testing

Utilisez le skill screen-reader-testing dans Claude Code ou Codex lorsque la tâche est une design review de ce type. Pertinence et limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Valider qu'une application web fonctionne correctement avec un logiciel de lecteur d'écran
  • Tester si les rôles, états et propriétés ARIA sont correctement implémentés
  • Déboguer les problèmes affectant les utilisateurs de technologies d'assistance
  • Garantir que les contrôles de formulaire sont accessibles avec des libellés et des annonces d'erreur appropriés
  • Tester que les mises à jour de contenu dynamique sont annoncées aux utilisateurs de lecteurs d'écran

Connaître les limites

  • Se fier uniquement à l'inspection visuelle pour valider l'accessibilité
  • Tester uniquement les scénarios de réussite sans valider les états d'erreur et les cas limites
  • Test des lecteurs d'écran mobiles sur iOS et Android ignoré

03 Dans le skill

Règles que le skill screen-reader-testing donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Testez avec de vrais lecteurs d'écran, pas des simulateurs

    Testez toujours avec un vrai logiciel de lecteur d'écran (VoiceOver, NVDA, JAWS, TalkBack, Narrator) plutôt qu'avec des outils de simulation ou des émulateurs.

  2. Utilisez d'abord le HTML sémantique, ARIA est complémentaire

    Construisez les interfaces avec des éléments HTML natifs avant d'ajouter des attributs ARIA. ARIA enrichit le HTML sémantique mais ne le remplace pas.

  3. Couverture minimale : NVDA+Firefox, VoiceOver+Safari sur macOS et iOS

    Au minimum, testez avec NVDA associé à Firefox sur Windows, VoiceOver avec Safari sur macOS, et VoiceOver avec Safari sur iOS avant de considérer l'application validée.

  4. Testez en mode navigation et en mode focus

    Vérifiez l'expérience en mode navigation (pour lire le contenu avec les flèches) et en mode focus (pour interagir avec les contrôles), car les lecteurs d'écran passent de l'un à l'autre automatiquement ou manuellement.

  5. Testez la navigation au clavier seul avant le test avec lecteur d'écran

    Effectuez d'abord les tests au clavier seul, car ils constituent la base de l'accessibilité aux lecteurs d'écran et permettent de détecter tôt les problèmes d'interaction.

  6. Vérifiez la gestion du focus pour les applications single-page

    Assurez-vous que le focus est correctement géré lorsque le contenu change dynamiquement, en particulier dans les SPA où les transitions de page se font sans rechargement complet.

  7. Ne testez jamais avec un seul lecteur d'écran

    Tester avec un seul lecteur d'écran est insuffisant. Les différents lecteurs d'écran ont des comportements et des habitudes d'utilisation différents selon les plateformes.

  8. Testez toujours le contenu dynamique et les états d'erreur

    Ne négligez pas le test du contenu qui se met à jour dynamiquement et ne limitez pas les tests au chemin idéal. Le contenu dynamique et la gestion des erreurs sont les sources les plus fréquentes de problèmes d'accessibilité.

04 Mettez-le en pratique

Installer screen-reader-testing dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter screen-reader-testing à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

Forme générique de la CLI skills pour plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Test the [checkout form] on [staging.example.com] with NVDA and VoiceOver to verify that all field labels are announced, required field indicators are read correctly, validation errors are communicated when the form is submitted with invalid data, and focus moves to the first error. Also confirm that the loading state during payment processing is announced and the success confirmation is read by the screen reader.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Vérifiez que le titre de la page est annoncé au chargement de la page
  • Confirmez que tous les titres sont détectables via le rotor (VoiceOver) ou la liste des éléments (NVDA, JAWS)
  • Vérifiez que les libellés sont lus avec leurs champs de saisie associés
  • Assurez-vous que les messages d'erreur sont annoncés lorsque les formulaires sont soumis avec des données invalides
  • Vérifiez que le focus est correctement piégé à l'intérieur des boîtes de dialogue modales et ne peut pas en sortir

Dans OpenDesign, importez screen-reader-testing depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Repository
github.com/wshobson/agents Branche main
Fichier du skill
plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License
MIT D'après LICENSE.
Étoiles du dépôt
39 635 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Ce n'est pas une note ni un décompte d'utilisation pour screen-reader-testing.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand Utiliser Ce SkillRépertorie des scénarios comme la validation de la compatibilité, le test d'ARIA, le débogage des technologies d'assistance et la vérification des formulaires et de la navigation
  2. Concepts ClésCouvre les principaux lecteurs d'écran par plateforme et usage, la priorité minimale de test, et les modes navigation vs focus vs application
  3. VoiceOver (macOS)Instructions d'installation, commandes essentielles avec touches modificatrices, navigation par rotor, liste de vérification de test et corrections des problèmes HTML/ARIA courants
  4. NVDA (Windows)Installation et commandes, navigation par titres et repères, basculement entre mode navigation et mode focus, et script de test étape par étape
  5. JAWS (Windows)Commandes essentielles incluant le curseur virtuel, touches rapides par type d'élément, mode formulaires et raccourcis de navigation dans les tableaux
  6. TalkBack (Android)Activation, gestes tactiles pour la navigation et l'activation, et options de granularité du contrôle de lecture
  7. Scénarios de Test CourantsModèles accessibles avec code pour les boîtes de dialogue modales avec piégeage du focus, les régions dynamiques et les interfaces à onglets avec support clavier
  8. Conseils de DébogageFonction JavaScript pour enregistrer le nom accessible, le rôle, l'état et la visibilité des éléments tels que perçus par les lecteurs d'écran
  9. Bonnes PratiquesÀ faire et à ne pas faire couvrant les tests réels, la priorité au HTML sémantique, le test des modes, la gestion du focus et l'évitement d'une validation avec un seul lecteur d'écran
Description du skill lui-même
« Testez des applications web avec des lecteurs d'écran incluant VoiceOver, NVDA et JAWS. Utilisez ce skill pour valider la compatibilité avec les lecteurs d'écran, déboguer des problèmes d'accessibilité ou assurer la prise en charge des technologies d'assistance. »

Description du front-matter du SKILL.md. Le fichier complet fait environ 12 020 caractères. Lire le fichier complet sur GitHub.

Test des lecteurs d'écran

Exécuter screen-reader-testing sur une vraie tâche de revue de conception.

Téléchargez OpenDesign, importez screen-reader-testing depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows