accessibilitylisted
Install: claude install-skill kreek/consult
# Accessibility
## Iron Law
`WCAG 2.2 AA IS THE FLOOR; NATIVE SEMANTICS COME FIRST.`
## When to Use
- Building, changing, or reviewing user-facing UI, forms, navigation,
modals, custom controls, interactive states, animation, color,
typography, or content structure.
- Testing keyboard flow, focus order, screen-reader behavior,
contrast, reduced motion, forced colors, or accessible names.
## When NOT to Use
- Backend-only changes with no user-facing output.
- Visual hierarchy or brand direction without implementation; use
`ui-design` first, then return here for accessibility constraints.
- Performance-only UI work; use `performance`, then verify
accessibility if rendering behavior changed.
## Core Ideas
1. Prefer native HTML controls and semantics before ARIA.
2. Every interactive element needs name, role, value, state, and
keyboard behavior.
3. Focus must be visible: at least a 2px outline at 3:1 contrast
against both adjacent surfaces, with a transparent fallback for
Forced Colors. Focus order must be logical. Focus must be restored
after modal or overlay close. Do not trap focus by hand inside a
`<dialog>`.
4. Color cannot be the only signal; contrast must satisfy WCAG 2.2
AA.
5. Motion, transparency, dark mode, high contrast, and forced colors
follow user preferences.
6. Forms need explicit labels, grouped controls, errors tied to
fields, and no placeholder-only instructions.
7. Automated checks catch only part of the problem; manu