# Accessibility

> Accessibility, a11y, WCAG 2.0 AA, AODA, ARIA, screen reader, keyboard navigation, tab order, focus ring, focus trap, skip link, alt text, color contrast, semantic landmarks, header/main/nav/footer, h1, prefers-reduced-motion. Use when building or reviewing any UI component, page, navigation, menu, dialog, modal, overlay, carousel, or self-starting animation in a web frontend.

- Skill: `htkoca/accessibility` (Agent Skill)
- Install (CLI): `npx skillmds@latest add htkoca/accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/htkoca/accessibility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: htkoca (https://skillmd.com/u/htkoca)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/htkoca/accessibility

---


# Accessibility

The floor, not a cleanup pass.

1. **WCAG 2.0 AA (AODA) is the baseline:** semantic landmarks (`header`/`main`/`footer`/`nav`/`section`), one `h1` per page, disclosures and nav keyboard-operable with correct ARIA, focus trapped in any modal overlay while open, visible `ring` focus states, decorative art `aria-hidden`.
2. **Respect `prefers-reduced-motion`**: ambient and entrance animations pause or reduce; every motion moment has a static equivalent, and nothing is readable only through motion.
3. **Contrast is checked in every theme scope**: AA contrast for text tokens (`muted-foreground` on `background` included) in the base theme and inside any inverse-color section.
4. **Self-starting motion carries a control**: anything that begins moving on its own and runs past a few seconds (a marquee drift, a carousel) pairs with a keyboard-operable pause. A hover pause is not one: it reaches neither keyboard nor touch, and the reduced-motion path only serves the readers who set the preference.
5. **Each landmark of a kind is named**: a page with more than one `nav` labels each (`Primary`, `Footer`, `Menu`), since an unnamed pair is indistinguishable to the reader listing them. The name is passed at the call site, never baked into the component.
