Skill: a11y-check
Trigger: /a11y-check or auto-called after UI implementation
Purpose: Verify accessibility compliance of implemented UI.
Checklist
Semantic HTML
- Headings in correct hierarchy (h1 → h2 → h3)
- Lists use
ul/ol/li - Buttons use
<button>, links use<a href> - Forms use
<label>withhtmlFor - Landmark regions:
<main>,<nav>,<header>,<footer>
ARIA
- Images have descriptive
alttext (oralt=""if decorative) - Icon-only buttons have
aria-label - Loading states use
aria-liveoraria-busy - Modal dialogs have
role="dialog"andaria-modal - No
aria-hiddenon focusable elements
Keyboard Navigation
- All interactive elements are keyboard-focusable
- Focus order is logical
- Focus is visible (not removed with
outline: nonewithout replacement) - Modals trap focus correctly
Color & Contrast
- Text contrast ratio ≥ 4.5:1 (normal text)
- Text contrast ratio ≥ 3:1 (large text)
- Information not conveyed by color alone
Output Format
## A11y Check Results: PASS / FAIL ### Issues (if FAIL) 1. [component:element] — [issue] → [fix] ### Warnings (non-blocking) - [suggestion]
Constraints
- Always run after any UI implementation
- FAIL items must be fixed before PR


