accessibility-checklist

--- name: accessibility-checklist description: Check a page, component or directory against a quick WCAG AA checklist — images, structure, contrast, keyboard, forms, ARIA, motion — reporting pass or fail with quick fixes in the chat. Use when the user wants a fast accessibility check of one piece of code rather than a formal audit. Not for a Figma design or mentoring feedback; see /design-a11y-audit or /coaching-a11y. metadata: argument-hint: "<component or page>" stack-aware: true --- # Checklist Run a quick WCAG 2.1 AA accessibility checklist against "$ARGUMENTS". This is a lightweight check — use the full audit workflow (scope → evaluate → report) for comprehensive testing. ## Prerequisites **Stack.** Before you build, test, lint, run or generate code, read the `Stack` section of the project's `AGENTS.md`, or of `CLAUDE.md` when `AGENTS.md` has none. Use its commands exactly as written, its `layout` for where files go and its `rules` as requirements. If it names a `profile`, also read the file `<profile>.md` in the `stacks` folder of this skill's bundled references for the full commands, layout and rules; the project's own keys win where both speak. If there is no `Stack` section, run the `singular-detect` skill, state what you inferred in one line, and offer to write the section with `singular-init`. Never assume a package manager, test runner or formatter the project did not declare. None — this is a utility skill that can run anytime. ## Process 1. **Read the target:** - Read the source code of "$ARGUMENTS" (file, component, or page) - If "$ARGUMENTS" is a directory, check all relevant files 2. **Check each category:** **Images & Media:** - [ ] All images have meaningful alt text (or alt="" if decorative) - [ ] Videos have captions - [ ] Audio has transcripts **Structure:** - [ ] Page has one h1 - [ ] Heading hierarchy is sequential (no skipped levels) - [ ] Landmark regions used (main, nav, header, footer) - [ ] Lists use proper list elements - [ ] Tables have headers **Color & Contrast:** - [ ] Text contrast ratio >= 4.5:1 (3:1 for large text) - [ ] UI component contrast >= 3:1 - [ ] Color is not the only way information is conveyed **Keyboard:** - [ ] All interactive elements are keyboard accessible - [ ] Focus order is logical - [ ] Focus indicator is visible - [ ] No keyboard traps **Forms:** - [ ] All inputs have associated labels - [ ] Required fields are indicated - [ ] Error messages are descriptive and associated with inputs - [ ] Form validation provides suggestions **ARIA:** - [ ] ARIA roles are correct - [ ] ARIA states update dynamically - [ ] Status messages use aria-live - [ ] Native HTML preferred over ARIA **Motion:** - [ ] prefers-reduced-motion is respected - [ ] Auto-playing content can be paused 3. **Report results** directly to the user (no artifact file): - Checklist items passed/failed - Quick fixes for any failures - Recommendation: full audit needed? (yes/no) ## References - `references/stacks/bun-react-ts.md` and `references/stacks/rust-gpui.md`: the shipped stack profiles ## Output Present the checklist results directly to the user. No artifact file created — this is a quick check, not a formal audit.