Chapter 11 / Accessibility and quality

Made for everyone.

Motion you can stop, a page you can use with only a keyboard, colors that pass contrast, and a page that checks itself. This is the part that separates a professional site from a demo.

Demos

Pause all motion

One switch, also in the menu bar, freezes every animation, canvas, 3D scene and video on the page. It starts paused when your system asks for reduced motion.

  • prefers-reduced-motion
  • WCAG 2.2.2

Keyboard and focus

A skip link at the very top, visible focus everywhere, a live readout of the focused element's role and name, and a toolbar with roving tabindex.

  • :focus-visible
  • Roving tabindex

Press Tab to move through the page. Every stop gets a clear focus ring, and this panel reads what a screen reader would announce.

The toolbar is one Tab stop. Use the arrow keys inside it.

Contrast checker

WCAG contrast computed live for any pair, plus the real text colors of this page in the current theme. Switch the theme and the table updates.

  • WCAG 1.4.3
  • Relative luminance
Large textBody text at normal size reads like this.
This page, current theme

The page audits itself

Accessibility checks (names, alt text, labels, headings, ids, contrast, target sizes) and real performance numbers from the browser's own timing APIs.

  • PerformanceObserver
  • Automated checks
Runs in your browser, on this page, right now