Accessibility Review

What This Skill Does

This skill audits designs or web pages for WCAG 2.1 AA accessibility compliance. It identifies common accessibility issues like insufficient color contrast and missing form labels. It's useful for designers, developers, and QA engineers who need to ensure their products are accessible to all users.

When to Use

Before launching a new website or appWhen redesigning an existing interfaceTo ensure compliance with accessibility standardsDuring the design process to catch issues earlyTraining designers on accessibility best practices

Key Features

Audits for WCAG 2.1 AA complianceIdentifies issues like color contrast and missing labelsSuggests recommendations for fixing issuesUses automated scans and manual testingCovers perceivable, operable, understandable, and robust principles

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

Operable

Understandable

Robust

Color Contrast Check

Keyboard Navigation

Screen Reader

Priority Fixes

[Critical fix] — Affects [who] and blocks [what] [Major fix] — Improves [what] for [who] [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./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

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

Operable

Understandable

Robust

Color Contrast Check

Keyboard Navigation

Screen Reader

Priority Fixes

[Critical fix] — Affects [who] and blocks [what] [Major fix] — Improves [what] for [who] [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 m