A11y Audit

Audit WCAG 2.2 AA/AAA con rapporti di contrasto misurati e correzioni basate su criteri

di plugin87 · plugin87/ux-ui-agent-skills

Promosso ★ 8.4/10

A11y Audit — Audit WCAG 2.2 AA/AAA con rapporti di contrasto misurati e correzioni basate su criteri

Cosa fa

Verifica un'interfaccia utente o un componente rispetto a WCAG 2.2 AA/AAA e ai pattern WAI-ARIA, restituendo una tabella di risultati indicizzata a specifici criteri di successo con gravità P0/P1/P2 e correzioni concrete. Si attiva quando l'utente chiede un controllo di accessibilità, verifica del contrasto o revisione della tastiera/screen-reader. Legge una checklist organizzata secondo POUR e un riferimento ARIA e misura il contrasto colore con uno script incluso piuttosto che stimare i rapporti a occhio.

Rapporto di test

SKILL.md recuperato e 6 percorsi referenziati verificati tramite raw fetch — tutti HTTP 200; wcag-checklist.md e aria-patterns.md sono riferimenti reali sostanziali (tabella criteri organizzata POUR, mappe tastiera ARIA APG). Eseguito scripts/contrast.py (pure python3, nessuna dipendenza): #767676/#fff = 4.54:1 PASS, #999/#fff = 2.85:1 FAIL, codici di uscita corretti. Per il test di output ho scritto un card.html di 6 elementi e l'ho verificato in due modi: un audit visivo baseline vs il corpo della skill, che impone l'esecuzione di contrast.py per coppia. I rapporti misurati hanno ribaltato due giudizi visivi — il link blu #5b8def sembra buono ma misura 3.23:1 (FAIL 1.4.3) e il badge rosso #d32f2f sembra debole ma misura 4.98:1 (PASS); l'intestazione #8a8a8a = 3.45:1 e il testo #a0a0a0 = 2.61:1 entrambi FAIL. Nessun problema di sicurezza (nessun curl|sh, base64, eval). Attrito: la directory della skill include solo SKILL.md e dipende da file/script fratelli nella root del repo, quindi una copia standalone della directory della skill rompe i suoi passaggi — è necessaria un'installazione completa del pacchetto.

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/a11y-audit-src
mkdir -p ~/.claude/skills
cp -R /tmp/a11y-audit-src/.claude/skills/a11y-audit ~/.claude/skills/a11y-audit
# IMPORTANT: the skill dir holds only SKILL.md. Its steps read repo-root sibling files
#   accessibility/wcag-checklist.md, accessibility/aria-patterns.md, taste/motion-choreography.md
#   and run scripts/contrast.py, scripts/measure_render.mjs, scripts/verify_states.mjs
# — all relative to the repo root, NOT bundled with the skill. For full function, install the
# whole package into your project: npx ux-ui-agent-skills  (installs accessibility/ + scripts/ too).
# scripts/contrast.py = pure python3, no deps. measure_render.mjs/verify_states.mjs need:
#   npm i -D playwright   (without it they SKIP with exit 0, they do not error).

Comandi e prompt di esempio

/a11y-auditAudit WCAG 2.2 AA/AAA con rapporti di contrasto misurati e correzioni basate su criteri

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

Audit this page for WCAG 2.2 AA compliance
Check the contrast ratios on this design
Review this component for screen-reader support

Rapporto completo →