accessibility-review
Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.
- Installs
- 4.1K
- Last 24h
- +16
- Trending rank
- #6859
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads accessibility-review automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
/accessibility-review
If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.
Audit a design or page for WCAG 2.1 AA accessibility compliance.
Usage
/accessibility-review $ARGUMENTS
Audit for accessibility: @$1
WCAG 2.1 AA Quick Reference
Perceivable
- 1.1.1 Non-text content has alt text
- 1.3.1 Info and structure conveyed semantically
- 1.4.3 Contrast ratio >= 4.5:1 (normal text), >= 3:1 (large text)
- 1.4.11 Non-text contrast >= 3:1 (UI components, graphics)
Operable
- 2.1.1 All functionality available via keyboard
- 2.4.3 Logical focus order
- 2.4.7 Visible focus indicator
- 2.5.5 Touch target >= 44x44 CSS pixels
Understandable
- 3.2.1 Predictable on focus (no unexpected changes)
- 3.3.1 Error identification (describe the error)
- 3.3.2 Labels or instructions for inputs
Robust
- 4.1.2 Name, role, value for all UI components
Common Issues
- Insufficient color contrast
- Missing form labels
- No keyboard access to interactive elements
- Missing alt text on meaningful images
- Focus traps in modals
- Missing ARIA landmarks
- Auto-playing media without controls
- Time limits without extension options
Testing Approach
- Automated scan (catches ~30% of issues)
- Keyboard-only navigation
- Screen reader testing (VoiceOver, NVDA)
- Color contrast verification
- Zoom to 200% — does layout break?
Output
## Accessibility Audit: [Design/Page Name]
**Standard:** WCAG 2.1 AA | **Date:** [Date]
### Summary
**Issues found:** [X] | **Critical:** [X] | **Major:** [X] | **Minor:** [X]
### Findings
#### Perceivable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [1.4.3 Contrast] | 🔴 Critical | [Fix] |
#### Operable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [2.1.1 Keyboard] | 🟡 Major | [Fix] |
#### Understandable
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [3.3.2 Labels] | 🟢 Minor | [Fix] |
#### Robust
| # | Issue | WCAG Criterion | Severity | Recommendation |
|---|-------|---------------|----------|----------------|
| 1 | [Issue] | [4.1.2 Name, Role, Value] | 🟡 Major | [Fix] |
### Color Contrast Check
| Element | Foreground | Background | Ratio | Required | Pass? |
|---------|-----------|------------|-------|----------|-------|
| [Body text] | [color] | [color] | [X]:1 | 4.5:1 | ✅/❌ |
### Keyboard Navigation
| Element | Tab Order | Enter/Space | Escape | Arrow Keys |
|---------|-----------|-------------|--------|------------|
| [Element] | [Order] | [Behavior] | [Behavior] | [Behavior] |
### Screen Reader
| Element | Announced As | Issue |
|---------|-------------|-------|
| [Element] | [What SR says] | [Problem if any] |
### Priority Fixes
1. **[Critical fix]** — Affects [who] and blocks [what]
2. **[Major fix]** — Improves [what] for [who]
3. **[Minor fix]** — Nice to have
If Connectors Available
If ~~design tool is connected:
- Inspect color values, font sizes, and touch targets directly from Figma
- Check component ARIA roles and keyboard behavior in the design spec
If ~~project tracker is connected:
- Create tickets for each accessibility finding with severity and WCAG criterion
- Link findings to existing accessibility remediation epics
Tips
- Start with contrast and keyboard — These catch the most common and impactful issues.
- Test with real assistive technology — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.
- Prioritize by impact — Fix issues that block users first, polish later.
FAQ
What does the accessibility-review skill do?
Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with "audit accessibility", "check a11y", "is this accessible?", or when reviewing a design for color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff.
How do I install accessibility-review?
Run npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/accessibility-review/ (personal) or .claude/skills/accessibility-review/ (project).
Which AI agents can use accessibility-review?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is accessibility-review safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains accessibility-review?
It is published by anthropics in anthropics/knowledge-work-plugins, and it is an official skill from the maker of the technology it covers. It has 4,089 recorded installs.
More from anthropics/knowledge-work-plugins
data-visualization
anthropics/knowledge-work-plugins
Create effective data visualizations with Python (matplotlib, seaborn, plotly). Use when building charts, choosing the right chart type for a dataset, creating publication-quality figures, or applying design principles like accessibility and color theory.
documentation
anthropics/knowledge-work-plugins
Write and maintain technical documentation. Trigger with "write docs for", "document this", "create a README", "write a runbook", "onboarding guide", or when the user needs help with any form of technical writing — API docs, architecture docs, or operational runbooks.
code-review
anthropics/knowledge-work-plugins
Review code changes for security, performance, and correctness. Trigger with a PR URL or diff, "review this before I merge", "is this code safe?", or when checking a change for N+1 queries, injection risks, missing edge cases, or error handling gaps.
build-dashboard
anthropics/knowledge-work-plugins
Build an interactive HTML dashboard with charts, filters, and tables. Use when creating an executive overview with KPI cards, turning query results into a shareable self-contained report, building a team monitoring snapshot, or needing multiple charts with filters in one browser-openable file.
system-design
anthropics/knowledge-work-plugins
Design systems, services, and architectures. Trigger with "design a system for", "how should we architect", "system design for", "what's the right architecture for", or when the user needs help with API design, data modeling, or service boundaries.
memory-management
anthropics/knowledge-work-plugins
Two-tier memory system that makes Claude a true workplace collaborator. Decodes shorthand, acronyms, nicknames, and internal language so Claude understands requests like a colleague would. CLAUDE.md for working memory, memory/ directory for the full knowledge base.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.