← ClaudeAtlas

accessibilitylisted

Use for accessible UI, WCAG, ARIA, keyboard, focus, contrast, and inclusive states.
kreek/consult · ★ 0 · AI & Automation · score 72
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