Vai alla guida all’uso
screen-reader-testingdi Seth Hobson

Screen Reader Testing Skill.

Una skill per Claude Code e Codex per la revisione del design: testa le applicazioni web con i lettori di schermo VoiceOver, NVDA e JAWS.

  • Design Review & Accessibility
  • Report di revisione
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
Front matter e intestazioni di sezione lette dal file upstream il 2026-09-14 · 12.020 caratteri in totale

01 Cosa fa

Cosa fa lo skill screen-reader-testing in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Testa applicazioni web con i screen reader VoiceOver, NVDA, JAWS, TalkBack e Narrator su piattaforme macOS, Windows, iOS e Android. Valida la compatibilità con gli screen reader, esegue il debug dei problemi con le tecnologie assistive e garantisce implementazioni ARIA corrette tramite test pratici con screen reader reali.

Copre navigazione, moduli, annunci di contenuti dinamici, gestione del focus e finestre di dialogo modali. Fornisce comandi specifici per piattaforma, checklist di test ed esempi di codice per pattern di accessibilità comuni. Sottolinea l'importanza di testare nelle diverse modalità dello screen reader (navigazione, focus, applicazione) e privilegia l'HTML semantico con ARIA come miglioramento supplementare.

Che cosa produce

  • Checklist di test VoiceOver che copre caricamento della pagina, navigazione, link, moduli, contenuti dinamici e tabelle
  • Script di test NVDA con istruzioni passo-passo per il caricamento iniziale, landmark, intestazioni, moduli, elementi interattivi e contenuti dinamici
  • Esempi di codice HTML che mostrano pattern accessibili e correzioni per problemi comuni come pulsanti senza etichetta, contenuti dinamici non annunciati ed errori nei moduli
  • Codice JavaScript per la gestione del focus, incluse finestre di dialogo modali, focus trapping e navigazione da tastiera dell'interfaccia a tab
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Testare con i Principali Screen Reader per Piattaforma

    Utilizzare NVDA con Firefox su Windows (31% di utilizzo), VoiceOver con Safari su macOS e iOS (15% di utilizzo), JAWS con Chrome (40% di utilizzo), TalkBack su Android (10% di utilizzo) e Narrator con Edge (4% di utilizzo).

  2. 02
    Navigare Usando Comandi Specifici dello Screen Reader

    Eseguire comandi come VO+Freccia Destra per la navigazione tra elementi di VoiceOver, H per i salti tra intestazioni di NVDA, Insert+F7 per gli elenchi di link di JAWS e lo scorrimento a due dita per lo scrolling di TalkBack.

  3. 03
    Testare in Modalità Navigazione e Focus

    Verificare che gli screen reader passino correttamente dalla modalità navigazione, per la lettura dei contenuti, alla modalità focus, per l'interazione con i controlli dei moduli, prestando attenzione agli annunci di cambio modalità.

  4. 04
    Validare la Struttura Semantica e ARIA

    Verificare che le intestazioni siano individuabili tramite rotor o elenco elementi, che i landmark siano correttamente etichettati, che le live region annuncino gli aggiornamenti e che ruoli come dialog, tab e progressbar siano implementati correttamente.

  5. 05
    Verificare la Gestione del Focus e l'Interazione da Tastiera

    Assicurarsi che il focus si sposti sugli errori dopo l'invio del modulo, che le finestre modali intrappolino correttamente il focus e lo restituiscano alla chiusura, e che le interfacce a tab rispondano ai tasti freccia, Home ed End.

  6. 06
    Testare gli Annunci di Contenuti Dinamici

    Attivare aggiornamenti di contenuto e confermare che role="status" con aria-live="polite" annunci le modifiche dopo il parlato corrente, mentre role="alert" interrompa immediatamente.

02 Trova la tua applicazione

Quando usare la skill screen-reader-testing

Usa la skill screen-reader-testing in Claude Code o Codex quando il lavoro è una design review di questo tipo. Ambito e limiti sotto sono presi dal file della skill stessa.

Buona applicazione

  • Validare che un'applicazione web funzioni correttamente con software screen reader
  • Testare se i ruoli, gli stati e le proprietà ARIA siano implementati correttamente
  • Eseguire il debug di problemi che riguardano gli utenti di tecnologie assistive
  • Garantire che i controlli dei moduli siano accessibili con etichette e annunci di errore adeguati
  • Verificare che gli aggiornamenti dei contenuti dinamici vengano annunciati agli utenti di screen reader

Conosci i limiti

  • Basarsi esclusivamente sull'ispezione visiva per validare l'accessibilità
  • Testare solo i percorsi di successo senza validare stati di errore e casi limite
  • Salta il test degli screen reader mobili su iOS e Android

03 Dentro la skill

Regole che la skill screen-reader-testing fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Testare con screen reader reali, non con simulatori

    Testare sempre utilizzando software screen reader reali (VoiceOver, NVDA, JAWS, TalkBack, Narrator) piuttosto che strumenti di simulazione o emulatori.

  2. Usare prima l'HTML semantico, ARIA è supplementare

    Costruire le interfacce con elementi HTML nativi prima di aggiungere attributi ARIA. ARIA arricchisce l'HTML semantico ma non lo sostituisce.

  3. Copertura minima: NVDA+Firefox, VoiceOver+Safari su macOS e iOS

    Come minimo, testare con NVDA abbinato a Firefox su Windows, VoiceOver con Safari su macOS e VoiceOver con Safari su iOS prima di considerare l'applicazione validata.

  4. Testare sia in modalità di navigazione che in modalità focus

    Verificare l'esperienza in modalità di navigazione (per leggere i contenuti con i tasti freccia) e in modalità focus (per interagire con i controlli), poiché gli screen reader passano dall'una all'altra automaticamente o manualmente.

  5. Testare la navigazione solo con tastiera prima del test con screen reader

    Completare prima il test solo con tastiera, poiché costituisce la base per l'accessibilità con screen reader e permette di individuare tempestivamente i problemi di interazione.

  6. Verificare la gestione del focus per le applicazioni single-page

    Assicurarsi che il focus sia gestito correttamente quando il contenuto cambia dinamicamente, soprattutto nelle SPA dove le transizioni di pagina avvengono senza ricaricamenti completi.

  7. Non testare mai con un solo screen reader

    Testare con un unico screen reader non è sufficiente. Screen reader diversi hanno comportamenti e modalità d'uso differenti sulle varie piattaforme.

  8. Testare sempre i contenuti dinamici e gli stati di errore

    Non saltare il test dei contenuti che si aggiornano dinamicamente e non limitare il test al percorso ideale. I contenuti dinamici e la gestione degli errori sono le fonti più comuni di problemi di accessibilità.

04 Mettila al lavoro

Installa screen-reader-testing in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi screen-reader-testing a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo task di revisione del design

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Verificare che il titolo della pagina venga annunciato al caricamento della pagina
  • Confermare che tutte le intestazioni siano individuabili tramite il rotore (VoiceOver) o l'elenco degli elementi (NVDA, JAWS)
  • Verificare che le etichette vengano lette insieme ai relativi campi di input
  • Assicurarsi che i messaggi di errore vengano annunciati quando i moduli vengono inviati con dati non validi
  • Verificare che il focus sia intrappolato correttamente all'interno delle finestre di dialogo modali e non possa uscirne

In OpenDesign importi screen-reader-testing dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Repository
github.com/wshobson/agents Branch main
File della skill
plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md Checksum del contenuto registrato alla verifica; commit 4236bb9
License
MIT Da LICENSE.
Stelle del repository
39.635 Snapshot GitHub acquisita il 14/09/2026 per l'intero repository wshobson/agents, che contiene 18 skill in questo catalogo. Non è un rating o un conteggio di utilizzo per screen-reader-testing.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. Quando Usare Questa SkillElenca scenari come la validazione della compatibilità, il test di ARIA, il debug delle tecnologie assistive e la verifica di form e navigazione
  2. Concetti FondamentaliCopre i principali screen reader per piattaforma e utilizzo, la priorità minima di test, e le modalità browse, focus e application
  3. VoiceOver (macOS)Istruzioni di configurazione, comandi essenziali con tasti modificatori, navigazione con il rotor, checklist di test e correzioni per problemi comuni di HTML/ARIA
  4. NVDA (Windows)Configurazione e comandi, navigazione tra intestazioni e landmark, passaggio tra modalità browse e focus, e script di test passo per passo
  5. JAWS (Windows)Comandi essenziali incluso il cursore virtuale, tasti rapidi per tipi di elemento, modalità form e scorciatoie di navigazione delle tabelle
  6. TalkBack (Android)Attivazione della configurazione, gesti touch per navigazione e attivazione, e opzioni di granularità del controllo di lettura
  7. Scenari di Test ComuniPattern accessibili con codice per finestre modali con focus trapping, live region e interfacce a tab con supporto da tastiera
  8. Consigli per il DebugFunzione JavaScript per registrare nome accessibile, ruolo, stato e visibilità degli elementi come percepiti dagli screen reader
  9. Best PracticeCose da fare e da evitare riguardanti test reali, priorità dell'HTML semantico, test delle modalità, gestione del focus ed evitare la validazione con un solo screen reader
Descrizione della skill
"Testare applicazioni web con screen reader tra cui VoiceOver, NVDA e JAWS. Utilizzare quando si convalida la compatibilità con gli screen reader, si esegue il debug di problemi di accessibilità o si garantisce il supporto per le tecnologie assistive."

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 12.020 caratteri. Leggi il file completo su GitHub.

Test con Screen Reader

Esegui screen-reader-testing su un task reale di revisione del design.

Scarica OpenDesign, importa screen-reader-testing dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

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

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows