accessibilitylisted

# Accessibility This skill is self-contained for day-to-day use. Deeper reference (needs the full harness checkout): `patterns/accessibility/README.md` (full examples including ARIA live regions and APG patterns). External canonical sources: [WCAG 2.2](https://www.w3.org/TR/WCAG22/) and the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/). **Target: WCAG 2.2 Level AA.** ## The first rule: don't use ARIA if a native element exists A native `<button>`, `<a href>`, `<input>`, `<label>`, `<nav>`, or `<table>` brings keyboard behavior, focus management, and the correct role/state for free. `role="button"` + `tabindex` + keyboard handler is a liability you now own forever. ```html <!-- Good: browser handles focus, Enter, Space, and role automatically --> <button type="button" onclick="save()">Save</button> <!-- Avoid: you must re-implement everything the native button provides --> <div role="button" tabindex="0" onclick="save()" onkeydown="handleKey(event)">Save</div> ``` ## Perceivable - **Text alternatives.** Meaningful images: `alt` describing *purpose*. Decorative images: `alt=""`. Icon-only controls: `aria-label` or visually-hidden text. - **Contrast.** Body text ≥ **4.5:1** against background. Large text (≥ 24px, or ≥ 18.66px bold) and UI components/graphics ≥ **3:1**. Verify computed colors — don't eyeball. - **Color alone is not enough.** A red border *and* an error text/icon — not red alone. ## Operable - **Keyboard.** All interactive el