web-design-guidelines

WCAG 2.2 compliance requires semantic HTML elements, programmatically associated form labels, 4.5:1 contrast for normal text, visible focus indicators, keyboard navigation for all interactive elements, and ARIA live regions for dynamic content. The guidelines map each rule to specific success criteria at Level A and AA.

Use a mobile-first approach with min-width media queries, fluid sizing via clamp(), min(), and max(), and container queries for component-level responsiveness. Set breakpoints where content breaks rather than at device widths, typically starting at 30rem, 48rem, 64rem, and 80rem.

Prefer native HTML elements like button, nav, and dialog over ARIA roles whenever they exist, since native elements provide keyboard access and semantics for free. Use ARIA only for patterns without native equivalents, such as tabs, trees, or comboboxes.

The guidelines are framework-agnostic and based on web platform standards, WCAG 2.2, and MDN documentation. The rules apply to any stack that outputs HTML and CSS, regardless of the JavaScript framework used.

Animations can trigger vestibular disorders and seizures when they flash more than three times per second or ignore user preferences. Wrap animations in a prefers-reduced-motion media query and animate only compositor-friendly properties like transform and opacity.

The guidelines provide rules and code patterns but do not execute automated audits or render tests. Actual conformance verification still requires tools like screen readers, contrast checkers, and real-device testing alongside these rules.