Frontend UI Accessibility

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 — WCAG-oriented checklist
• performance/performance-optimization — web vitals
• gstack/design-review — visual polish (complementary)