skill-accessibilitylisted
Install: claude install-skill saitarrun/Sdlc-ai-workflow
# 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
```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
1. Hide mouse
2. Tab through entire page
3. Check: Focus visible, order logical, no traps
4. Test: Enter (buttons), Space (toggles), A