Which tools are recommended for testing?

Automated scanners, keyboard navigation checks, screen readers (VoiceOver, NVDA), and color contrast verification tools.

What should I do if issues are found?

Prioritize by severity, implement fixes in design and code, rerun tests, and document changes for traceability.

accessibility-review

Scanned

npx machina-cli add skill anthropics/knowledge-work-plugins/accessibility-review --openclaw

Files (1)

SKILL.md

1.5 KB

Accessibility Review

Evaluate designs and implementations against WCAG 2.1 AA standards.

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?

Source

git clone https://github.com/anthropics/knowledge-work-plugins/blob/main/design/skills/accessibility-review/SKILL.mdView on GitHub

Overview

Accessibility Review assesses designs and implementations against WCAG 2.1 AA to ensure they are perceivable, operable, understandable, and robust. It highlights common issues like color contrast, missing labels, keyboard access, focus indicators, and ARIA landmarks, guiding teams to accessible experiences.

How This Skill Works

The skill runs an automated WCAG 2.1 AA scan, followed by manual verification: keyboard-only navigation, screen reader testing (VoiceOver, NVDA), color contrast verification, and a 200% zoom sanity check to ensure layout resilience.

When to Use It

Before releasing a new UI or feature to verify accessibility impact.
During design reviews to catch accessibility gaps early.
When users ask, 'is this accessible' or request an accessibility assessment.
After making changes to evaluate if fixes addressed WCAG issues.
When evaluating color contrast and keyboard navigation across components.

Quick Start

Step 1: Run automated WCAG 2.1 AA scan on the UI/codebase.
Step 2: Perform keyboard-only navigation and verify focus indicators and labels.
Step 3: Test with screen readers (VoiceOver/NVDA) and verify color contrast and zoom resilience.

Best Practices

Provide alt text for all meaningful images and decorative images where appropriate.
Use semantic HTML and clear ARIA landmarks to convey structure.
Ensure all functionality is reachable and operable via keyboard alone.
Offer a visible focus indicator and logical focus order for interactive elements.
Annotate forms with labels and descriptive error messages; avoid relying on color alone to convey meaning.

Example Use Cases

Audit a landing page for color contrast, alt text, and keyboard operability.
Review a modal dialog for proper focus order and absence of a focus trap.
Validate a multi-field form with proper labels, instructions, and error states.
Check a navigation menu to ensure keyboard access and visible focus indicators.
Assess a component with ARIA roles/landmarks for robustness across assistive technologies.

Frequently Asked Questions

Add this skill to your agents