CSS & Accessibility

A lot of accessibility lives in CSS, not HTML. Whether text reflows when zoomed, whether focus is visible, whether motion respects user preference, whether colours have enough contrast: CSS decides all of these. The prefers-reduced-motion, prefers-color-scheme, forced-colors, and prefers-contrast media queries let you read what the person's system is telling you and respond to it.

Two W3C user stories show what this looks like. Marta magnifies content up to 20 times and depends on layouts that reflow at high zoom. Tables that don't adapt and text that doesn't flow become unusable. Elias increases text size in the browser and hits the same wall when sites assume a fixed width. Both benefit from generous focus indicators, large hit targets, and reduced motion.

Use relative units so users can scale text. Keep layouts fluid so content reflows on zoom. Never hide focus indicators. Respect prefers-reduced-motion and prefers-color-scheme. Keep contrast above WCAG minimums and give controls enough space to hit with imprecise input.

Upcoming events

  1. Prefers Enhanced Motion

    GMT
    featuring Cyd Stumpel
    Description

    The way most creative developers experience the web is completely different from how most users experience it. This talk explores how to responsibly add enhancements to websites without leaving users behind.