accessibility-check

name	accessibility-check
description	Evaluate accessibility and WCAG compliance of UI components and pages. Use when the user asks to "check accessibility", "audit a11y", "WCAG review", "screen reader test", or needs to verify inclusive design practices.

Accessibility Check Skill

Evaluate UI accessibility against WCAG 2.1 guidelines to ensure inclusive design for all users.

When to Use

• Before releasing new features
• Auditing existing interfaces
• Reviewing component libraries
• Ensuring legal compliance
• Improving user inclusivity

WCAG 2.1 Checklist

Level A (Minimum)

Perceivable

• 1.1.1 Non-text Content: Images have alt text
• 1.3.1 Info and Relationships: Semantic HTML structure
• 1.3.2 Meaningful Sequence: Logical reading order
• 1.4.1 Use of Color: Color not sole indicator

Operable

• 2.1.1 Keyboard: All functionality via keyboard
• 2.1.2 No Keyboard Trap: Can navigate away
• 2.4.1 Bypass Blocks: Skip to content link
• 2.4.2 Page Titled: Descriptive page titles
• 2.4.3 Focus Order: Logical tab sequence
• 2.4.4 Link Purpose: Links describe destination

Understandable

• 3.1.1 Language of Page: lang attribute set
• 3.2.1 On Focus: No unexpected changes
• 3.2.2 On Input: No unexpected changes
• 3.3.1 Error Identification: Errors clearly described
• 3.3.2 Labels: Form inputs have labels

Robust

• 4.1.1 Parsing: Valid HTML
• 4.1.2 Name, Role, Value: ARIA correctly used

Level AA (Standard Target)

Perceivable

• 1.4.3 Contrast (Minimum): 4.5:1 for text
• 1.4.4 Resize Text: Readable at 200% zoom
• 1.4.5 Images of Text: Avoid where possible

Operable

• 2.4.5 Multiple Ways: Multiple navigation paths
• 2.4.6 Headings and Labels: Descriptive headings
• 2.4.7 Focus Visible: Clear focus indicators

Understandable

• 3.2.3 Consistent Navigation: Same nav location
• 3.2.4 Consistent Identification: Same icons/labels
• 3.3.3 Error Suggestion: Suggest corrections
• 3.3.4 Error Prevention: Confirm destructive actions

Testing Methods

1. Automated Testing

# Using axe-core via Playwright
npx playwright test --grep accessibility

# Using pa11y
npx pa11y http://localhost:5176

2. Manual Keyboard Testing

1. Tab through entire page
2. Verify focus visibility
3. Test Enter/Space activation
4. Check Escape closes modals
5. Verify arrow key navigation in menus

3. Screen Reader Testing

• Test with VoiceOver (Mac)
• Test with NVDA (Windows)
• Verify announcements make sense
• Check form label associations

4. Visual Testing

• Check color contrast ratios
• Test at 200% zoom
• Verify without color
• Check reduced motion

Output Format

## Accessibility Audit: [Component/Page]

### Compliance Summary
- **Target Level**: WCAG 2.1 AA
- **Current Status**: [Pass / Partial / Fail]
- **Critical Issues**: [count]
- **Warnings**: [count]

### Issues Found

#### Critical (Must Fix)
| Criterion | Issue | Location | Fix |
|-----------|-------|----------|-----|
| 1.4.3 | Low contrast | Button text | Increase to 4.5:1 |

#### Warnings (Should Fix)
| Criterion | Issue | Location | Fix |
|-----------|-------|----------|-----|

### Passing Criteria
- [List of criteria that pass]

### Testing Notes
- Keyboard: [Pass/Fail + notes]
- Screen Reader: [Pass/Fail + notes]
- Color Contrast: [Pass/Fail + notes]

### Recommendations
1. [Priority fix with code example]

Common Fixes

Missing Alt Text

// Bad
<img src="logo.png" />

// Good
<img src="logo.png" alt="LogiDocs Certify logo" />

Missing Form Labels

// Bad
<input type="email" placeholder="Email" />

// Good
<label htmlFor="email">Email</label>
<input id="email" type="email" />

Low Contrast Fix

/* Bad: 2.5:1 ratio */
.button { color: #999; background: #fff; }

/* Good: 4.5:1+ ratio */
.button { color: #595959; background: #fff; }

Focus Indicator

/* Ensure visible focus */
:focus {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
}

Integration

Works best with:

• ux-expert agent for accessibility context
• ux-audit skill for broader evaluation
• Playwright for automated testing