I85PREP
⌘ K
WAS study materials
WAS study resources

WAS: Accessible Design, CSS, and Responsive Layout

WAS · Work through your exam, one topic at a time.

All guide sections

Accessible Design, CSS, and Responsive Layout

Accessible design and CSS determine whether content survives zoom, reflow, contrast changes, and user styles. WCAG 2.2 AA requires 1.4.3 Contrast (Minimum) at 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold), 1.4.11 Non-text Contrast at 3:1 for UI components and graphics, and 1.4.4 Resize Text up to 200% without loss.

Layout rules

  • Use relative units (rem/em) and flexible grids; avoid fixed pixel heights that clip text.
  • 1.4.10 Reflow: at 320 CSS px width, content reflows to one column without horizontal scrolling, except data tables and maps.
  • Do not block zoom with user-scalable=no or maximum-scale=1.
  • Maintain DOM order; CSS order, flex order, and grid placement can create a mismatch between visual and reading/focus order.
  • 2.4.7 Focus Visible: never remove outlines without a visible replacement; 2.4.11 Focus Not Obscured (Minimum) requires the focused component not be entirely hidden by sticky headers or overlays.
  • Respect prefers-reduced-motion and forced-colors; ensure hover/focus content is dismissible, hoverable, and persistent (1.4.13).

Worked example

A designer removes the focus ring and adds a hover color change. Keyboard users cannot see where they are. Fix: :focus-visible { outline: 2px solid; outline-offset: 2px; } with sufficient contrast against the background. Reasoning: hover is pointer-only; focus must be visible for keyboard and switch users.

Traps

Using color alone to convey state; fixed-width layouts; absolute positioning that breaks reflow; hiding focusable content with display:none but expecting screen reader access (it is removed); and letting sticky headers cover focused links.