At the system level, accessibility is reviewed once and inherited everywhere. If your tokens and components are accessible, every screen built from them starts accessible. This lesson is about reviewing the system, not individual pages.
Contrast across every theme
Check that your semantic colour tokens meet contrast (4.5:1 normal text, 3:1 large/UI) in <em>every</em> theme — light, dark and any others. Because components use tokens, fixing a token fixes contrast everywhere it is used. This is a huge advantage of token systems.
Focus management
Every interactive component needs a visible <code>:focus-visible</code> style defined once in the system. Review that focus rings are present, have enough contrast against all backgrounds, and are never removed. Keyboard users navigate entirely by focus.
Motion and target sizes
Confirm the system honours <code>prefers-reduced-motion</code> globally, and that interactive targets meet minimum sizes (around 44×44px) so they are usable by touch and motor-impaired users. These are component-level guarantees.
A reusable review checklist
/* fix contrast on this one page *//* fix the --text-muted token → fixed everywhere */Auditing accessibility page by page forever. Audit the system (tokens and components) once, fix at the source, and every page inherits the fix.
Bake accessibility into tokens and components: accessible contrast in all themes, a shared focus style, global reduced-motion support and adequate target sizes. Review the system with a checklist, not endless page-by-page audits.
Run the checklist above against the mini design system you built earlier. Check token contrast in both light and dark, confirm a shared focus-visible style, and verify reduced-motion is handled.
1. Why review the system, not just pages?
2. Minimum touch target size?
3. Contrast should be checked…
- Review accessibility at the system level — fixes propagate everywhere.
- Check token contrast in every theme.
- Define one shared :focus-visible style; honour reduced motion globally.
- Ensure ~44px targets and never rely on colour alone.