web-accessibility — Claude Code skill for WCAG and ARIA
A skill that steers your coding agent toward accessible web UI: ARIA patterns, keyboard focus handling, screen reader support, all following WCAG 2.1.
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-codeWhat web-accessibility does
The skill ships with TSX snippets you can lift straight into a React project: a toggle button carrying aria-pressed, a dialog with role="dialog" and a Tab focus trap, a menubar navigation, and a form field wired to its error message through aria-describedby. Contrast gets its own section — getContrastRatio walks the WCAG AA thresholds of 4.5:1 for body text and 3:1 for large text and UI parts. A .sr-only rule covers labels meant for screen readers only.
Testing is part of the package. The skill points at axe-core and jest-axe, so a component test fails when violations show up. Accessibility then rides along with your normal test run instead of waiting for a manual audit.
Everything assumes React with TypeScript and Jest. Port the ARIA patterns to Vue or plain HTML if you like, but the code samples won't drop in unchanged. Installation runs through npx skills add with a per-platform flag, so the command differs depending on your editor.
What it helps with
- trap Tab focus inside a modal and restore it on close
- tie a validation error to its input with
aria-describedby - measure the contrast ratio of two colors against WCAG AA
- mark up a dropdown with
menubar,menuitemandaria-expanded - add a
jest-axetest that fails on accessibility violations
Example prompts for the agent
- Build a modal with
role="dialog"and a Tab focus trap - Check whether
#767676text on white passes WCAG AA contrast - Add an email field with
aria-invalidand an error message announced to screen readers
How to install web-accessibility
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-code2Manually: put the files in place
~/.claude/skills/web-accessibility/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/web-accessibility/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a codex2Manually: put the files in place
.agents/skills/web-accessibility/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a cursor2Manually: put the files in place
.cursor/skills/web-accessibility/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills web-accessibility2Manually: put the files in place
.github/skills/web-accessibility/SKILL.md1Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a gemini-cli2Platform CLI
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/web-accessibilityManually: put the files in place
.devin/skills/web-accessibility/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill web-accessibility -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about web-accessibility
How do I install web-accessibility in Claude Code?
Run npx skills add hoodini/ai-agents-skills --skill web-accessibility -a claude-code. The skill lands in ~/.claude/skills/web-accessibility/SKILL.md.
What does the web-accessibility skill do?
It hands the agent working examples of accessible markup: ARIA roles for buttons, dialogs and menus, keyboard focus management, contrast math, and jest-axe tests.
Which platforms can use this skill?
There are install commands for Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Each one passes its own -a flag and writes the skill into that platform's directory.
