|
| 1 | +--- |
| 2 | +name: audit-accessibility |
| 3 | +description: Audit a feature for WCAG 2.1 AA compliance using POUR principles when the user asks to check accessibility, audit a11y, or verify WCAG compliance |
| 4 | +owner: chalk |
| 5 | +version: "1.0.0" |
| 6 | +metadata-version: "1" |
| 7 | +allowed-tools: Read, Glob, Grep, Write |
| 8 | +argument-hint: "[feature or component to audit for accessibility]" |
| 9 | +--- |
| 10 | + |
| 11 | +# Audit Accessibility |
| 12 | + |
| 13 | +## Overview |
| 14 | + |
| 15 | +Generate a WCAG 2.1 AA compliance audit for a specific feature or component, organized by the POUR principles (Perceivable, Operable, Understandable, Robust). Produces a concrete checklist with testing instructions, keyboard navigation paths, screen reader expectations, and color contrast requirements. |
| 16 | + |
| 17 | +## Workflow |
| 18 | + |
| 19 | +1. **Read feature context** -- Scan `.chalk/docs/product/` for the PRD describing the feature. Check `.chalk/docs/engineering/` for component architecture and any existing a11y guidelines. Read the source code for the feature's UI components to understand the actual implementation. |
| 20 | + |
| 21 | +2. **Parse the audit target** -- Extract from `$ARGUMENTS` the feature, page, or component to audit. If unspecified, ask the user to name a specific feature -- auditing the entire application at once produces shallow results. |
| 22 | + |
| 23 | +3. **Determine the next file number** -- Read filenames in `.chalk/docs/engineering/` to find the highest numbered file. The next number is `highest + 1`. |
| 24 | + |
| 25 | +4. **Audit Perceivable** -- Check: |
| 26 | + - All images have meaningful alt text (decorative images use `alt=""`) |
| 27 | + - Color is not the only means of conveying information |
| 28 | + - Text meets contrast ratios (4.5:1 for normal text, 3:1 for large text) |
| 29 | + - Content is readable at 200% zoom |
| 30 | + - Media has captions or transcripts |
| 31 | + |
| 32 | +5. **Audit Operable** -- Check: |
| 33 | + - All interactive elements are reachable via keyboard (Tab, Shift+Tab, Enter, Space, Escape, Arrow keys) |
| 34 | + - Document the expected keyboard navigation path through the feature |
| 35 | + - Focus order matches visual order |
| 36 | + - No keyboard traps |
| 37 | + - Focus indicators are visible |
| 38 | + - Touch targets are at least 44x44 CSS pixels |
| 39 | + |
| 40 | +6. **Audit Understandable** -- Check: |
| 41 | + - Form inputs have visible labels (not just placeholders) |
| 42 | + - Error messages identify the field and describe how to fix the error |
| 43 | + - Consistent navigation and naming patterns |
| 44 | + - Language is set on the page element |
| 45 | + |
| 46 | +7. **Audit Robust** -- Check: |
| 47 | + - Semantic HTML elements used appropriately (buttons, links, headings, landmarks) |
| 48 | + - ARIA roles, states, and properties are correct and necessary |
| 49 | + - Components work with major screen readers (VoiceOver, NVDA, JAWS) |
| 50 | + - No ARIA is better than bad ARIA |
| 51 | + |
| 52 | +8. **Write the file** -- Save to `.chalk/docs/engineering/<n>_a11y_audit_<feature-slug>.md`. |
| 53 | + |
| 54 | +9. **Confirm** -- Share the file path and highlight the highest-severity issues that block users from completing tasks. |
| 55 | + |
| 56 | +## Output |
| 57 | + |
| 58 | +- **File**: `.chalk/docs/engineering/<n>_a11y_audit_<feature-slug>.md` |
| 59 | +- **Format**: Plain markdown with POUR-organized checklist, each item marked pass/fail/needs-review with specific testing instructions |
| 60 | +- **First line**: `# Accessibility Audit: <Feature Name>` |
| 61 | + |
| 62 | +## Anti-patterns |
| 63 | + |
| 64 | +- **Checklist without testing instructions** -- "Check color contrast" is not actionable. Specify which elements, what the current ratio is, and what the target ratio should be. |
| 65 | +- **ARIA overuse** -- Adding `role="button"` to a `<button>` is redundant. Adding ARIA to fix semantic HTML problems is treating symptoms. Prefer native HTML elements. |
| 66 | +- **Keyboard testing only with Tab** -- Many components require Arrow keys (tabs, menus, radio groups), Escape (modals, dropdowns), Space (checkboxes), and Enter (buttons, links). Document the full expected keyboard interaction model. |
| 67 | +- **Ignoring screen reader output** -- An element can be technically accessible but produce nonsensical screen reader output. Specify what the screen reader should announce for each interactive element. |
| 68 | +- **Treating a11y as a one-time audit** -- Note which checks should be automated in CI and which require manual testing on each release. |
0 commit comments