Accessibility Review
Run a WCAG 2.1 AA accessibility audit on a Figma design or live page before developer handoff or release.
Overview
accessibility-review is an agent skill most often used in Ship (also Build and Validate) that runs WCAG 2.1 AA audits on designs or pages for contrast, keyboard, touch targets, and screen reader readiness.
Install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill accessibility-reviewWhat is this skill?
- WCAG 2.1 AA quick reference across Perceivable, Operable, Understandable, and Robust
- Checks contrast (4.5:1 normal, 3:1 large/UI), keyboard access, focus order, and 44×44px touch targets
- Maps common failures: insufficient contrast, missing labels, no keyboard access, missing alt text
- Triggered by audit accessibility, check a11y, or is this accessible before handoff
- WCAG 2.1 AA criteria quick reference (Perceivable, Operable, Understandable, Robust)
- 4.5:1 contrast minimum for normal text; 3:1 for large text and UI components
- 44×44 CSS pixel minimum touch target (2.5.5)
Adoption & trust: 1.8k installs on skills.sh; 19.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are about to hand off or ship a UI without a structured check for WCAG 2.1 AA contrast, keyboard access, labels, or alt text.
Who is it for?
Solo builders auditing Figma frames or staging URLs immediately before dev handoff or go-live.
Skip if: Teams that only need unattended CI axe scans with no design context, or formal VPAT/legal attestation workflows.
When should I use this skill?
audit accessibility, check a11y, is this accessible?, or when reviewing color contrast, keyboard navigation, touch target size, or screen reader behavior before handoff
What do I get? / Deliverables
You receive a criterion-aligned accessibility audit with common-issue flags so you can fix blockers before implementation or launch.
- WCAG 2.1 AA audit with criterion references and common-issue checklist
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Pre-handoff and pre-release review is the canonical shelf for accessibility compliance checks. Ship/review is where design and UI quality gates belong before you launch or merge.
Where it fits
Audit a landing-page mock for contrast and form labels before you build the real page.
Review component specs for 44×44 touch targets and focus indicators while implementing UI.
Run a final WCAG pass on staging URL behavior before merge or release.
Sanity-check marketing screens that reuse product UI patterns for basic operability and contrast.
How it compares
Agent-guided WCAG design review skill, not a hosted automated scanning SaaS or MCP server.
Common Questions / FAQ
Who is accessibility-review for?
Solo and indie builders who design or review their own web and mobile UI and want WCAG 2.1 AA checks before handoff without hiring a dedicated a11y consultant for every screen.
When should I use accessibility-review?
During Validate when checking a landing prototype, during Build while refining frontend patterns, and during Ship when you say audit accessibility, check a11y, or review contrast and keyboard behavior before release.
Is accessibility-review safe to install?
Review the Security Audits panel on this Prism page for install risk and third-party repo signals before enabling the skill in your agent.
SKILL.md
READMESKILL.md - Accessibility Review
# /accessibility-review > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../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 1. Insufficient color contrast 2. Missing form labels 3. No keyboard access to interactive elements 4. Missing alt text on meaningful images 5. Focus traps in modals 6. Missing ARIA landmarks 7. Auto-playing media without controls 8. Time limits without extension options ## Testing Approach 1. Automated scan (catches ~30% of issues) 2. Keyboard-only navigation 3. Screen reader testing (VoiceOver, NVDA) 4. Color contrast verification 5. Zoom to 200% — does layout break? ## Output ```markdown ## 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 1. **Start with contrast and keyboard** — These catch