Nelle parole della skill
Questa skill verifica e corregge l'accessibilità web secondo WCAG 2.2, organizzata intorno a POUR — Percettibile, Utilizzabile, Comprensibile, Robusto — e ai livelli di conformità A, AA e AAA. Segue un workflow basato sulle evidenze: quando è disponibile una pagina renderizzata, esegue un audit Lighthouse di accessibilità live (lighthouse_audit con Chrome DevTools MCP), usa i nodi non superati per localizzare il componente, ispeziona l'albero dell'accessibilità con take_snapshot, poi corregge il sorgente e riesegue.
Se gli strumenti live mancano, Lighthouse CLI o axe coprono la metà automatizzata e gli stessi controlli manuali restano validi. Include regole a livello di codice per testo alternativo, rapporti di contrasto, visibilità del focus, dimensione dei target, movimento ridotto, errori nei moduli e autenticazione accessibile, più un elenco di triage ordinato in critical, serious e moderate.
Che cosa produce
- Un elenco di problemi prioritizzato, raggruppato nei livelli Critical (da correggere subito), Serious (da correggere prima del lancio) e Moderate (da correggere presto), con esempi concreti.
- Markup corretto e snippet pronti da incollare, inclusa una utility visually-hidden per esporre alle tecnologie assistive le etichette dei pulsanti icona.
- Implementazioni di riferimento complete in references/A11Y-PATTERNS.md, che coprono etichette dei moduli, focus trap nei modali, skip link, tab ARIA, regioni live, gestione degli errori e comandi per screen reader.
Come funziona
- 01Esegui un audit di accessibilità live
Parti da una pagina renderizzata ed esegui un audit Lighthouse di accessibilità live, usando la modalità mobile navigation per le pagine pubbliche generali o la modalità snapshot quando un ricaricamento farebbe perdere lo stato autenticato.
- 02Localizza il componente che fallisce
Usa i nodi dell'audit non superati per puntare al componente o al template specifico, invece di fare grep su tutto il repository per pattern generici.
- 03Ispeziona l'albero dell'accessibilità
Leggi uno snapshot renderizzato dell'albero dell'accessibilità per verificare nomi, ruoli, stati, landmark e struttura dei titoli, poi prova il flusso interessato con la tastiera.
- 04Correggi il sorgente e riverifica
Modifica il sorgente, non l'output renderizzato, poi ripeti lo stesso audit e la stessa interazione manuale per confermare la correzione.
- 05Ripiega sugli strumenti CLI
Quando gli strumenti browser live non sono disponibili, abbina l'output di Lighthouse CLI o axe agli stessi controlli manuali, perché l'automazione da sola copre solo una parte delle barriere.