Frontend Ui Accessibility

---
name: frontend-ui-accessibility
description: >
  Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented
  checks. Use when implementing or reviewing web UI, forms, modals, and design systems.
  Triggers: "accessibility", "a11y", "WCAG", "keyboard nav", "screen reader".
---

# Frontend UI and accessibility

## Defaults

- Semantic HTML first; ARIA only when native semantics insufficient
- Keyboard-operable for every interactive control
- Visible focus states; do not remove outlines without replacement
- Color contrast and non-color-only status cues

## Build checklist

- [ ] Heading hierarchy (`h1` once per view where applicable)
- [ ] Labels tied to inputs (`label`/`for` or `aria-labelledby`)
- [ ] Buttons vs links used correctly
- [ ] Modals: focus trap, `Escape`, return focus on close
- [ ] Images: meaningful `alt` or decorative `alt=""`
- [ ] Dynamic updates: `aria-live` when needed

## Review checklist

- [ ] Tab order logical; no keyboard traps
- [ ] Touch targets adequate on mobile
- [ ] Motion respects `prefers-reduced-motion`
- [ ] Forms: errors associated with fields

## Performance interaction

Avoid layout thrash; lazy-load below fold; measure LCP/CLS when shipping UI.

## Related

- [reference.md](reference.md) — WCAG-oriented checklist
- `performance/performance-optimization` — web vitals
- `gstack/design-review` — visual polish (complementary)