Web design guidelines

Use when reviewing or building web UI: layout, accessibility, forms, navigation, and visual polish.

Accessibility

Every interactive control has a visible focus state and a name (label, aria-label, or aria-labelledby).
Prefer native elements (button, a, input, label) before custom div-click handlers.
Color is not the only signal; pair status with text, icon, or pattern.
Meet contrast for text and UI chrome (aim for WCAG AA; AAA for small body text when feasible).
Heading order reflects structure (h1 → h2 → …); don’t skip levels for styling.
Images: meaningful content gets descriptive alt; decorative images use alt="".
Motion: respect prefers-reduced-motion for non-essential animation.