Accessibility Review

Name: Accessibility Review
Author: ruskicoder

ASecurity

Run a WCAG 2.1 AA accessibility audit on a design or page. Trigger with

3 stars

0 votes

0 copies

0 views

Added 9/20/2026

designtesting

Security Analysis

A100/100

Scanned 9/20/2026

Install to Claude Code

$npx -y skills add ruskicoder/system-prompts --skill accessibility-review --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Accessibility Review?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Accessibility Review

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/ruskicoder-accessibility-review/badge)](https://www.skillsdirectory.com/skills/ruskicoder-accessibility-review)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

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

<!-- Generated from skills/design-accessibility-review.md by tools/generate_integrations.py. Edit the source file, not this one. -->

# /accessibility-review

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

Attribution

ruskicoder

View source More from ruskicoder →

SSkills DirectorySkills Directory

Your tool, in front of Claude Code builders.

3 founder slots · $299/mo · GSC-verified traffic · sponsors can never buy grades.

See placements

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

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