# Treygoff24 Autonomous Dev Kit Accessibility Checklist

> Accessibility Checklist

- Skill: `tomevault-io/treygoff24-autonomous-dev-kit-accessibility-checklist` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/treygoff24-autonomous-dev-kit-accessibility-checklist`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/treygoff24-autonomous-dev-kit-accessibility-checklist/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/treygoff24-autonomous-dev-kit-accessibility-checklist

---


# Accessibility Checklist

Run accessibility checks on every interactive component before code review.

## When to Use

- After implementing any interactive UI component
- Before requesting code review
- When auditing existing UI for accessibility gaps

## How to Use

**Announce:** "I'm using the accessibility-checklist skill to verify this component." This runs in a forked `a11y-reviewer` agent context.

**Create TodoWrite items** for each applicable check below. Mark as you verify.

## Required Checks

### Labels and Roles

Create todos for each:
- [ ] `aria-label` on icon buttons, inputs without visible labels, sliders
- [ ] `role` attribute when not using semantic HTML elements
- [ ] `aria-live` on dynamic content (toasts, loading states, live updates)
- [ ] Form labels connected via `htmlFor`/`id`

### Keyboard Navigation

- [ ] Enter/Space activates buttons and interactive elements
- [ ] Escape dismisses modals, dropdowns, popovers
- [ ] Arrow keys navigate within composite widgets (tabs, menus, sliders)
- [ ] Tab order follows logical reading order
- [ ] No keyboard traps (can always tab out of components)

### Visual

- [ ] Visible focus styles using `:focus-visible`
- [ ] Color contrast meets WCAG AA (4.5:1 for text, 3:1 for UI)
- [ ] Information not conveyed by color alone
- [ ] Touch targets at least 44x44px

### Motion and Animation

- [ ] Reduced motion support via `prefers-reduced-motion`
- [ ] No auto-playing animations that can't be paused
- [ ] No flashing content (seizure risk)

### Content

- [ ] Images have meaningful alt text (or empty alt="" for decorative)
- [ ] Headings follow hierarchical order (h1 → h2 → h3)
- [ ] Links have descriptive text (not "click here")
- [ ] Error messages are clear and associated with their fields

## Quick Test

Before marking complete, perform these manual checks:

1. **Keyboard-only test:** Navigate the entire feature without a mouse
2. **Screen reader spot-check:** Turn on VoiceOver (Mac) or NVDA (Windows) and verify key flows
3. **Zoom test:** Set browser to 200% zoom and verify layout doesn't break

## Common Fixes

**Icon button without label:**
```tsx
<button aria-label="Close modal" onClick={onClose}>
  <XIcon />
</button>
```

**Live region for dynamic content:**
```tsx
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>
```

**Reduced motion support:**
```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

**Focus visible styles:**
```css
button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
```

## Workflow

1. Identify all interactive elements in the component
2. Create TodoWrite with applicable checks
3. Test each item, marking complete or fixing issues
4. Run the Quick Test manually
5. Report any items that couldn't be verified

## Output

After verification, provide:
- **Verdict:** approve / revise
- **Issues fixed:** What you corrected during the check
- **Manual test results:** Keyboard, screen reader, zoom outcomes
- **Remaining issues:** Anything that needs user attention

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/treygoff24) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->