PaperclipOrg
Claude Agent Skill · by Anthropics

Accessibility Review

Install Accessibility Review skill for Claude Code from anthropics/knowledge-work-plugins.

Install
Terminal · npx
$npx skills add https://github.com/obra/superpowers --skill brainstorming
Works with Paperclip

How Accessibility Review fits into a Paperclip company.

Accessibility Review drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md128 lines
Expand
---name: accessibility-reviewdescription: 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](../../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 contrast2. Missing form labels3. No keyboard access to interactive elements4. Missing alt text on meaningful images5. Focus traps in modals6. Missing ARIA landmarks7. Auto-playing media without controls8. Time limits without extension options ## Testing Approach 1. Automated scan (catches ~30% of issues)2. Keyboard-only navigation3. Screen reader testing (VoiceOver, NVDA)4. Color contrast verification5. 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 Fixes1. **[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 the most common and impactful issues.2. **Test with real assistive technology** — My audit is a great start, but manual testing with VoiceOver/NVDA catches things I can't.3. **Prioritize by impact** — Fix issues that block users first, polish later.