# Accessibility — WCAG 2.2 AA Baseline

WCAG 2.2 AA is the minimum baseline for all design and implementation work unless a stricter standard applies. Test with keyboard, screen reader, zoom/reflow, high contrast, reduced motion, and representative pointer inputs; automated checks alone are insufficient.

Primary standard: [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/).

## Contrast and non-color cues

| Content | Minimum |
|---|---:|
| Normal text | 4.5:1 |
| Large text (at least 18pt regular or 14pt bold) | 3:1 |
| Essential UI components and graphical objects | 3:1 against adjacent colors |

Placeholder text is still text and must meet 4.5:1. Do not communicate state through color alone: pair error, success, selection, and chart colors with text, icons, patterns, or position. See [contrast-advanced.md](./contrast-advanced.md) for audited pairs and optional APCA use.

## Focus and keyboard

- **2.4.7 Focus Visible (AA):** every keyboard-operable control has a visible focus indicator.
- **2.4.11 Focus Not Obscured (Minimum) (AA):** when a component receives keyboard focus, author-created content must not entirely hide it.
- **1.4.11 Non-text Contrast (AA):** the visible focus indicator must provide at least 3:1 contrast against adjacent colors when it is the visual information needed to identify focus.
- **2.4.13 Focus Appearance (AAA):** the two-CSS-pixel perimeter area and change-of-contrast metrics are enhanced guidance, not requirements of 2.4.11.

```css
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
```

Never remove focus styling without an equivalent replacement. Tab order follows the meaningful reading order. Use native elements where possible. Arrow-key, Home/End, Escape, and focus-management behavior follows the applicable WAI-ARIA Authoring Practices pattern; do not invent a global shortcut contract.

## WCAG 2.2 additions at A/AA

- **2.4.11 Focus Not Obscured (Minimum):** sticky headers, cookie banners, and overlays must not fully cover the focused item.
- **2.5.7 Dragging Movements:** any drag operation has a single-pointer alternative that does not require dragging.
- **2.5.8 Target Size (Minimum):** pointer targets are at least 24×24 CSS px or satisfy a listed spacing/exception condition. Prefer 44×44 CSS px for primary and touch actions.
- **3.2.6 Consistent Help:** repeated help mechanisms occur in a consistent relative order.
- **3.3.7 Redundant Entry:** do not require users to re-enter information already supplied in the same process unless an exception applies.
- **3.3.8 Accessible Authentication (Minimum):** authentication must not require a cognitive-function test without an allowed alternative or assistance mechanism; support password managers and paste.

## Forms, semantics, and status

- Associate every input with a visible label and expose instructions/errors with `aria-describedby` when appropriate.
- On failed submission, focus an error summary or the first invalid field without losing entered data.
- Use one descriptive page heading hierarchy; heading levels communicate structure rather than visual size.
- Give meaningful images concise alternatives and decorative images `alt=""`.
- Give icon-only controls an accessible name on the control; hide decorative SVGs from the accessibility tree.
- Pre-mount polite/assertive live regions when dynamic updates must be announced. Do not move focus merely to announce a status.

## Motion, reflow, and input

- Respect `prefers-reduced-motion`; provide pause/stop controls where WCAG timing or animation criteria apply.
- Content reflows at 400% zoom without two-dimensional scrolling except for exempt content such as large data tables.
- Do not disable browser zoom.
- Provide visible controls as alternatives to gestures, dragging, device motion, or path-based input.
- Honor text resizing and platform dynamic type; avoid clipping and fixed-height text containers.

## Release checklist

- [ ] Normal text 4.5:1; large text and essential non-text UI 3:1.
- [ ] Focus is visible, not fully obscured, and distinguishable against adjacent colors.
- [ ] All functionality works with keyboard alone and focus returns logically after overlays close.
- [ ] Targets meet 2.5.8 and critical touch targets prefer 44×44 CSS px.
- [ ] Dragging has a non-drag alternative.
- [ ] Labels, names, roles, values, errors, and dynamic status are exposed to assistive technology.
- [ ] Authentication supports paste/password managers and avoids unsupported cognitive tests.
- [ ] Zoom, reflow, text scaling, reduced motion, and high-contrast modes have been exercised.