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