Skill

Official

Pass

Audit score 90

accessibility-review

anthropics/knowledge-work-plugins

Run a WCAG 2.1 AA accessibility audit on designs and pages to catch contrast, keyboard, and screen reader issues.

What is accessibility-review?

Audits a design or page against WCAG 2.1 AA standards, checking for color contrast, keyboard navigation, touch targets, alt text, and screen reader compatibility. Use this before handoff or when reviewing any interface for accessibility compliance.

Automated scan for WCAG 2.1 AA compliance across Perceivable, Operable, Understandable, and Robust criteria
Color contrast verification (4.5:1 for normal text, 3:1 for large text and UI components)
Keyboard navigation and focus order testing
Screen reader announcement inspection
Touch target size validation (44x44 CSS pixels minimum)
Severity-ranked findings with specific WCAG criterion references and remediation steps

How to install accessibility-review

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-review

Claude Code

Cursor

Windsurf

Cline

How to use accessibility-review

1.Trigger the skill with phrases like 'audit accessibility', 'check a11y', or 'is this accessible?'
2.Provide a Figma URL, live page URL, or design description as the argument
3.Review the audit output organized by WCAG principle (Perceivable, Operable, Understandable, Robust)
4.Check the color contrast table and keyboard navigation matrix for specific element behavior
5.Prioritize fixes by severity (Critical, Major, Minor) and impact on user groups
6.Create tickets or remediation tasks for each finding using the WCAG criterion reference

Use cases

Good for

Audit a Figma design before handing off to development
Check a live URL for accessibility compliance before launch
Review a page for color contrast and keyboard navigation issues
Validate form labels and error identification for understandable interactions
Test modal focus traps and ARIA landmark structure

Who it's for

Design leads and UX designers reviewing work before handoff
Developers implementing accessible components
QA engineers testing accessibility compliance
Product managers ensuring inclusive user experiences
Accessibility specialists conducting compliance audits

accessibility-review FAQ

What WCAG standard does this audit?

WCAG 2.1 AA, the widely-adopted accessibility standard covering perceivable, operable, understandable, and robust design principles.

Can this catch all accessibility issues?

No. Automated scans catch ~30% of issues. Manual testing with real assistive technology (VoiceOver, NVDA) and keyboard-only navigation is essential for comprehensive coverage.

What if I have a Figma design and a live page?

Provide the Figma URL or page URL as the argument. If design tools or project trackers are connected, the skill can inspect values directly and create tickets for findings.

How should I prioritize fixes?

Start with contrast and keyboard navigation—these have the highest impact. Fix critical issues that block users first, then major issues, then minor polish items.

What's the minimum touch target size?

44x44 CSS pixels, per WCAG 2.5.5. This ensures usability on mobile and touch devices.

Full instructions (SKILL.md)

Source of truth, from anthropics/knowledge-work-plugins.

name: accessibility-review description: 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. argument-hint: "<Figma URL, URL, or description>"

/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.