saitarrun Skill: Accessibility (WCAG 2.1 AA)
Ensure your product is usable by everyone, including people with disabilities. Accessibility is a feature, not optional.
WCAG 2.1 AA Checklist
Perceivable
- Images have meaningful alt text
- Videos have captions
- Color is not the only way to convey info
- Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
- Content can be resized 200% without loss
- No flashing > 3x/second
Operable
- Keyboard accessible (Tab, Enter, Space, Arrows)
- Focus visible (outline or custom)
- Focus order logical (top→bottom)
- No keyboard traps
- Enough time to read content
- Navigable (headings, landmarks, skip links)
Understandable
- Language identified
- Instructions clear
- Form labels + error messages
- Consistent navigation
Robust
- Valid semantic HTML
- Heading hierarchy valid (h1 → h2/h3, no skips)
- ARIA only when HTML insufficient
- Works with assistive tech
Semantic HTML
<!-- ✓ Use semantic tags -->
<nav>Navigation</nav>
<main>Content</main>
<article>Post</article>
<section>Section</section>
<aside>Related</aside>
<!-- ✓ Form labels -->
<label for="email">Email</label>
<input id="email" type="email" />
<!-- ✓ Heading hierarchy -->
<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
Keyboard Testing
- Hide mouse
- Tab through entire page
- Check: Focus visible, order logical, no traps
- Test: Enter (buttons), Space (toggles), Arrows (menus)
Screen Reader Testing
- NVDA (free, Windows): Ctrl+Alt+N
- VoiceOver (Mac): Cmd+F5
- Mobile: TalkBack (Android), VoiceOver (iOS)
Color Contrast
- Text: 4.5:1 minimum (white text on dark blue too light)
- Large text (18pt+): 3:1 minimum
- Use: WebAIM contrast checker
Testing Tools
- Automated: axe, WAVE, Lighthouse
- Manual: Screen reader, keyboard-only
- CI: axe in Playwright tests
Success
- WCAG 2.1 AA compliant
- Keyboard usable (no mouse)
- Screen reader tested
- Zero high/critical violations
- Contrast ≥ 4.5:1
Status: Ready for accessibility work
Best for: A11y audits, accessible design, WCAG compliance