Accessibility Compliance
WCAG 2.2 AA-granskning av webbsidor: alt-text, kontrastberäkning, diagram- och formulärmönster
Testad · Fungerar
Vad den gör
Omvandlar en tillgänglighetsförfrågan till en WCAG 2.2 AA-genomgång av markup: en POUR-checklista, ett WHO/WHAT/WHERE alt-text-beslutsträd, ett tillgängligt diagrammönster med en länkad datatabell, formulärfält med aria-describedby och role="alert", hantering av prefers-reduced-motion, och en körbar kontrastförhållandefunktion. Utlöses när du ber att granska en webbplats eller mall för WCAG-efterlevnad, skriva alt-text för bilder, göra en datavisualisering eller ett formulär skärmläsarvänligt, eller kontrollera färgkontrast. Inkluderar checklistor för bildtexter och ljudbeskrivningar, Paul Tol färgblindsäkra paletter, ett fäst axe-core plus Playwright-granskningsrecept, och aktuella amerikanska och europeiska lagliga tidsfrister.
Testrapport
Klonade till en tillfällig HOME (export HOME=$(mktemp -d)) och kopierade färdighetskatalogen; SKILL.md hamnade på ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter har name+description, och kroppen refererar inte till några repofiler (de tre "Related skills" finns alla i trädet; SKILL.md, dev-toolkit/README.md och plugin.json returnerade alla HTTP 200). Uppgift: granska ett 30-raders HTML-fragment från en nyhetsartikel (dålig alt-text, diagram som PNG, oetiketterat e-postfält, div som knapp vid 20x20px, autoplay-video, a:focus{outline:none}, tre lågkontrastfärger) och producera en fixad version. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) fick semantik, etiketter och en riktig knapp men skrev "contrast looks too light, should be checked" och "only 20x20px, hard to hit"; färdighetskörningen (8.8KB, a11y_skill.md) citerade WCAG 2.2 SC 2.5.8 med tröskeln 24x24 CSS-px, och jag exekverade faktiskt färdighetens validate_contrast() för att få 2.79:1 / 3.14:1 / 3.12:1 FAIL och 6.29:1 / 6.54:1 PASS för ersättningarna. Färdighetsversionen lade också till <details>-datatabellen plus aria-labelledby/describedby för diagrammet (baseline skrev bara en enradig alt), ett prefers-reduced-motion-block och JS-grind som baseline helt missade, caption/description <track>-element, och :focus-visible istället för baselinens trubbiga :focus. Säkerhetsskanning ren: inga curl|sh, inga base64, inga hemligheter, npm-beroende låst till en exakt version som jag bekräftade existerar och är den senaste på npm-registret, och filen instruerar dig explicit att ladda axe från den lokala node_modules istället för en CDN. Dokumentationen fick avdrag en poäng: beskrivningen är journalistik-inramad och kallar sig "essential", och data-journalism i "Related skills" levereras i ett annat plugin än detta.
Testad: 2026-07-31 · Claude Code 2.x (agent harness)
Installation
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.
Kommandon och exempelprompter
/accessibility-complianceWCAG 2.2 AA-granskning av webbsidor: alt-text, kontrastberäkning, diagram- och formulärmönster
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
Audit this news site for WCAG complianceWrite alt text for these news imagesBuild an accessible data visualization for readers