# Accessibility

Primary source: section 48 — Cross-cutting. Supporting sources: section 04 — Color, section 22 — Foundations, section 23 — Iconography.

Vecreal targets WCAG 2.1 AA across all product surfaces (source: section 48 — Cross-cutting).

## Keyboard

- Tab moves through focusable elements; Shift+Tab moves backward (source: section 48 — Cross-cutting).
- Enter and Space activate buttons (source: section 48 — Cross-cutting).
- Escape closes modals, popovers, and menus (source: section 48 — Cross-cutting).
- Arrow keys move within lists, tables, and calendars where those patterns apply (source: section 48 — Cross-cutting).
- Every action must be reachable without a mouse (source: section 48 — Cross-cutting).

## Focus

- Every interactive element needs a visible focus state using the clay focus ring (source: section 48 — Cross-cutting; section 22 — Foundations).
- The tokenized focus ring lives in `design-tokens.json` as `focus-ring` and `focus-ring-soft` (source: section 22 — Foundations).

## Contrast And Color

- Text contrast follows the color contrast table in the HTML reference (source: section 04 — Color).
- Status color must be paired with a shape, icon, or text label. Color alone is not enough (source: section 04 — Color; section 48 — Cross-cutting).
- The system is color-blind safe when status color is paired with labels and icons (source: section 48 — Cross-cutting).

## Screen Readers

- Icon-only buttons need an `aria-label` on the button (source: section 23 — Iconography; section 48 — Cross-cutting).
- Decorative icons should use `aria-hidden="true"` when text already carries the meaning (source: section 23 — Iconography).
- Status dots need role and label semantics so the state is spoken, not only seen (source: section 48 — Cross-cutting).
- Modals trap focus and announce their title on open (source: section 48 — Cross-cutting).
- Live indicators and counters should use live regions when updates need to be announced (source: section 48 — Cross-cutting).
- Tables should use real table markup with headers and column scope (source: section 48 — Cross-cutting).

## Motion

- Respect `prefers-reduced-motion: reduce` and disable nonessential animation for those users (source: section 48 — Cross-cutting).
- Motion should communicate state, not decorate the interface (source: section 07 — Design system principles).

## Native HTML

Use real `button`, `a`, `input`, and `table` elements before recreating those controls with generic containers (source: section 48 — Cross-cutting).