accessibility-checker

name	accessibility-checker
description	Verify WCAG 2.1 AA compliance by analyzing HTML structure, ARIA usage, contrast, keyboard patterns, and semantic markup. Runs before completion in FE Designer mode.
risk	safe
source	self
tags	["accessibility","wcag","a11y","aria","compliance"]

Accessibility Checker Skill

When to Use

Auto-trigger:

• Before attempt_completion in FE Designer mode
• When user asks to check or verify accessibility
• When creating forms, modals, navigation, or interactive widgets

Check Process

1. Semantic HTML Audit

Read the component/page files and verify:

search_files(path="src", regex="<div\\s+(onClick|onKeyDown|role=\"button\")", file_pattern="*.{tsx,jsx,vue,svelte}")

Flag: <div> with click handlers → should be <button> or <a>

search_files(path="src", regex="<(img|svg)(?![^>]*alt=)(?![^>]*aria-label)", file_pattern="*.{tsx,jsx,vue,svelte}")

Flag: Images without alt text or aria-label

2. Heading Structure

search_files(path="src", regex="<h[1-6]", file_pattern="*.{tsx,jsx,vue,svelte}")

Verify:

• Only one <h1> per page/route
• No skipped heading levels
• Headings describe their section content

3. Form Accessibility

search_files(path="src", regex="<input(?![^>]*aria-label)(?![^>]*(id=\"[^\"]+\")).*>", file_pattern="*.{tsx,jsx,vue,svelte}")

Verify:

• Every <input> has an associated <label> (via htmlFor/for) or aria-label
• Required fields are indicated (not just by color)
• Error messages are associated via aria-describedby
• Submit buttons are descriptive

4. Keyboard Navigation

For interactive widgets, verify the expected keyboard pattern:

Widget	Keys	Expected Behavior
Button	Enter, Space	Activate
Link	Enter	Navigate
Menu	Arrow keys	Navigate items
Dialog	Tab trap, Escape	Cycle focus, close
Tabs	Arrow keys	Switch tabs
Combobox	Arrow keys, Enter, Escape	Navigate, select, close
Accordion	Enter, Space	Toggle panel

5. Color Contrast Spot-Check

The agent cannot compute contrast automatically, but CAN:

• Identify text-color + background-color pairs from CSS
• Check if they use semantic tokens with known values
• Flag obviously low-contrast combinations (gray on light gray, etc.)
• Recommend user run axe-core or Lighthouse for automated checking

6. Focus Visibility

search_files(path="src", regex="outline:\\s*none|outline:\\s*0|:focus\\s*\\{[^}]*outline:\\s*(none|0)", file_pattern="*.{css,scss}")

Flag: Removed focus outlines without replacement

7. Motion Sensitivity

search_files(path="src", regex="animation|transition|@keyframes", file_pattern="*.{css,scss}")

For each file with animations, verify:

search_files(path="src", regex="prefers-reduced-motion", file_pattern="*.{css,scss}")

Flag: Files with animations but no prefers-reduced-motion check

Output Report

## Accessibility Audit Report

### Passed ✅
(List of checks that passed)

### Failed ❌
(Each failure with: what, where, why, how to fix)

### Warnings ⚠️
(Potential issues that need manual verification)

### Recommended Tools
- Run `npx axe-core` or browser Lighthouse for automated contrast/ARIA checking
- Test with keyboard-only navigation
- Test with screen reader (VoiceOver, NVDA, JAWS)

Reference

Full WCAG checklist: .roo/rules-fe-designer/accessibility-standards.md Component patterns: .roo/rules-fe-designer/component-design-patterns.md