Accessibility Compliance

Revisione WCAG 2.2 AA di pagine web: testo alternativo, calcolo contrasto, pattern grafici e moduli

di jamditis · jamditis/claude-skills-journalism

Promosso ★ 8.8/10

Accessibility Compliance — Revisione WCAG 2.2 AA di pagine web: testo alternativo, calcolo contrasto, pattern grafici e moduli

Cosa fa

Trasforma una richiesta di accessibilità in un passaggio WCAG 2.2 AA sul markup: una checklist POUR, un albero decisionale WHO/WHAT/WHERE per il testo alternativo, un pattern grafico accessibile con una tabella dati collegata, campi modulo con aria-describedby e role="alert", gestione prefers-reduced-motion e una funzione di calcolo del rapporto di contrasto eseguibile. Si attiva quando si chiede di verificare un sito o un template per la conformità WCAG, scrivere testo alternativo per le immagini, rendere una visualizzazione dati o un modulo utilizzabile da screen reader, o controllare il contrasto dei colori. Include checklist per didascalie e audio-descrizioni, palette Paul Tol sicure per daltonici, una ricetta di audit axe-core più Playwright bloccata, e le attuali scadenze legali USA e UE.

Rapporto di test

Clonato in una HOME temporanea (export HOME=$(mktemp -d)) e copiata la directory della skill; SKILL.md è stato posizionato in ~/.claude/skills/accessibility-compliance/SKILL.md, il frontmatter ha name+description, e il corpo non fa riferimento a file del repository (le tre "Related skills" esistono tutte nell'albero; SKILL.md, dev-toolkit/README.md e plugin.json hanno tutti restituito HTTP 200). Task: revisionare un frammento HTML di un articolo di notizie di 30 righe (testo alternativo errato, grafico come PNG, campo email senza etichetta, div-come-pulsante a 20x20px, video autoplay, a:focus{outline:none}, tre colori a basso contrasto) e produrre una versione corretta. La baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) ha ottenuto semantica, etichette e un vero pulsante ma ha scritto "contrast looks too light, should be checked" e "only 20x20px, hard to hit"; l'esecuzione della skill (8.8KB, a11y_skill.md) ha citato WCAG 2.2 SC 2.5.8 con la soglia CSS-px 24x24, e ho effettivamente eseguito validate_contrast() della skill per ottenere 2.79:1 / 3.14:1 / 3.12:1 FAIL e 6.29:1 / 6.54:1 PASS per le sostituzioni. La versione della skill ha anche aggiunto la tabella dati <details> più aria-labelledby/describedby per il grafico (la baseline ha solo scritto un alt di una riga), un blocco prefers-reduced-motion e un gate JS che la baseline ha completamente omesso, elementi <track> per didascalie/descrizioni, e :focus-visible invece del rozzo :focus della baseline. Scansione di sicurezza pulita: nessun curl|sh, nessun base64, nessun segreto, dipendenza npm bloccata a una versione esatta che ho confermato esistere ed essere l'ultima corrente sul registro npm, e il file ti dice esplicitamente di caricare axe dal node_modules locale piuttosto che da una CDN. La documentazione ha perso un punto: la descrizione è inquadrata in termini giornalistici e si definisce "essential", e data-journalism in "Related skills" viene fornito in un plugin diverso da questo.

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

Installazione

git clone --depth 1 https://github.com/jamditis/claude-skills-journalism.git /tmp/accessibility-compliance-src
mkdir -p ~/.claude/skills
cp -R /tmp/accessibility-compliance-src/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/accessibility-compliance
# Single self-contained SKILL.md (20KB), no bundled scripts or reference files.
# No dependencies needed for the review/markup guidance itself.
# Optional, only for the automated-audit section of the skill:
#   npm install --save-dev --save-exact axe-core@4.12.1 && npm ci
#   pip install playwright && playwright install chromium
# Plugin-marketplace alternative: the repo ships .claude-plugin/marketplace.json and the
# skill lives in the "dev-toolkit" plugin, which also bundles 9 other dev skills.

Comandi e prompt di esempio

/accessibility-complianceRevisione WCAG 2.2 AA di pagine web: testo alternativo, calcolo contrasto, pattern grafici e moduli

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 news site for WCAG compliance
Write alt text for these news images
Build an accessible data visualization for readers

Rapporto completo →