Nelle parole della skill
Una routine di audit WCAG 2.1 AA per un design o una pagina, attivata da frasi come "audit accessibility" o "check a11y" e che accetta come argomento un URL Figma, un URL o una descrizione.
Contiene un riferimento rapido condensato di undici criteri distribuiti tra Percepibile, Operabile, Comprensibile e Robusto, con contrasto 4,5:1 per il testo normale, 3:1 per il testo grande e i componenti UI, accesso da tastiera, focus visibile e aree di tocco di 44x44 pixel CSS, più otto problemi comuni e un approccio di test in cinque passaggi che inizia con una scansione automatica che intercetta circa il 30% dei problemi. I risultati confluiscono in un report markdown fisso con conteggi per gravità, tabelle per principio, sezioni su contrasto, tastiera e screen reader e correzioni prioritizzate.
Che cosa produce
- Un report markdown di audit sull'accessibilità, intestato con il nome del design o della pagina e lo standard WCAG 2.1 AA.
- Una sezione dei risultati suddivisa in tabelle Percepibile, Operabile, Comprensibile e Robusto con problema, criterio, gravità e raccomandazione.
- Tabelle dedicate a contrasto cromatico, navigazione da tastiera e screen reader, incluso il nome annunciato per ogni elemento.
- Un elenco ordinato di correzioni prioritarie che separa le correzioni critiche che bloccano gli utenti dai miglioramenti principali e dagli interventi minori.
Come funziona
- 01Indicare l'elemento da verificare
Il comando accetta come argomento un URL Figma, un URL di pagina o una descrizione scritta e verifica quel target.
- 02Verificare gli undici criteri AA
Il riferimento rapido raggruppa i criteri in Percepibile, Operabile, Comprensibile e Robusto, ciascuno con il numero del criterio di successo e la soglia.
- 03Eseguire i cinque passaggi di test
Scansione automatica, navigazione con la sola tastiera, test con screen reader, verifica del contrasto e zoom al 200%, in quest'ordine.
- 04Scrivere la struttura fissa del report
Un unico report markdown con un riepilogo della gravità, una tabella dei risultati per principio e tabelle separate per contrasto, tastiera e screen reader.
- 05Usare i connettori quando disponibili
Con uno strumento di design collegato legge i valori di colore, le dimensioni dei caratteri e le aree di tocco da Figma; con un tracker di progetto apre ticket per ogni risultato.