Accessibility Compliance
WCAG 2.2 AA review of web pages: alt text, contrast math, chart and form patterns
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 31, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · b1bb5b8
Cloned into a temp HOME (export HOME=$(mktemp -d)) and copied the skill dir; SKILL.md landed at ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter has name+description, and the body references no repo files (the three "Related skills" all exist in the tree; SKILL.md, dev-toolkit/README.md and plugin.json all returned HTTP 200). Task: review a 30-line news-article HTML fragment (bad alt text, chart-as-PNG, unlabeled email field, div-as-button at 20x20px, autoplay video, a:focus{outline:none}, three low-contrast colors) and produce a fixed version. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) got semantics, labels and a real button but wrote "contrast looks too light, should be checked" and "only 20x20px, hard to hit"; the skill run (8.8KB, a11y_skill.md) cited WCAG 2.2 SC 2.5.8 with the 24x24 CSS-px threshold, and I actually executed the skill's validate_contrast() to get 2.79:1 / 3.14:1 / 3.12:1 FAIL and 6.29:1 / 6.54:1 PASS for the replacements. The skill version also added the <details> data table plus aria-labelledby/describedby for the chart (baseline just wrote a one-line alt), a prefers-reduced-motion block and JS gate that baseline missed entirely, caption/description <track> elements, and :focus-visible instead of baseline's blunt :focus. Security scan clean: no curl|sh, no base64, no secrets, npm dep pinned to an exact version that I confirmed exists and is current latest on the npm registry, and the file explicitly tells you to load axe from the local node_modules rather than a CDN. Docs docked one point: description is journalism-framed and calls itself "essential", and data-journalism in "Related skills" ships in a different plugin than this one.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 8/10
- Docs & honesty 4/5
What Accessibility Compliance does
Turns an accessibility request into a WCAG 2.2 AA pass over markup: a POUR checklist, a WHO/WHAT/WHERE alt-text decision tree, an accessible chart pattern with a linked data table, form fields with aria-describedby and role="alert", prefers-reduced-motion handling, and a runnable contrast-ratio function. Triggers when you ask to audit a site or template for WCAG compliance, write alt text for images, make a data visualization or form screen-reader usable, or check color contrast. Includes caption and audio-description checklists, Paul Tol color-blind-safe palettes, a pinned axe-core plus Playwright audit recipe, and current US and EU legal deadlines.
How to install Accessibility Compliance
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.
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Accessibility Compliance
-
/accessibility-complianceWCAG 2.2 AA review of web pages: alt text, contrast math, chart and form patterns
It also activates on plain-language prompts like these:
-
Audit this news site for WCAG compliance -
Write alt text for these news images -
Build an accessible data visualization for readers
Frequently asked questions
- Is the Accessibility Compliance skill free?
- Yes. The skill itself is free from jamditis/claude-skills-journalism. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Accessibility Compliance work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 31, 2026. Verdict: Tested · Works. Cloned into a temp HOME (export HOME=$(mktemp -d)) and copied the skill dir; SKILL.md landed at ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter has name+description, and the body references no repo files (the three "Related skills" all exist in the tree; SKILL.md, dev-toolkit/README.md and plugin.json all returned HTTP 200). Task: review a 30-line news-article HTML fragment (bad alt text, chart-as-PNG, unlabeled email field, div-as-button at 20x20px, autoplay video, a:focus{outline:none}, three low-contrast colors) and produce a fixed version. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) got semantics, labels and a real button but wrote "contrast looks too light, should be checked" and "only 20x20px, hard to hit"; the skill run (8.8KB, a11y_skill.md) cited WCAG 2.2 SC 2.5.8 with the 24x24 CSS-px threshold, and I actually executed the skill's validate_contrast() to get 2.79:1 / 3.14:1 / 3.12:1 FAIL and 6.29:1 / 6.54:1 PASS for the replacements. The skill version also added the <details> data table plus aria-labelledby/describedby for the chart (baseline just wrote a one-line alt), a prefers-reduced-motion block and JS gate that baseline missed entirely, caption/description <track> elements, and :focus-visible instead of baseline's blunt :focus. Security scan clean: no curl|sh, no base64, no secrets, npm dep pinned to an exact version that I confirmed exists and is current latest on the npm registry, and the file explicitly tells you to load axe from the local node_modules rather than a CDN. Docs docked one point: description is journalism-framed and calls itself "essential", and data-journalism in "Related skills" ships in a different plugin than this one.
- What is the Accessibility Compliance SkillProof Score?
- 8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 4/5.
- How do I install Accessibility Compliance?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Accessibility Compliance with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.