Focus management is the most-violated accessibility pattern in modern web UI. Components remove focus rings because designers find them ugly. Modals don't trap focus and tab key escapes to the underlying page. Pages don't offer skip-to-content links and screen-reader users have to traverse the entire nav on every page.
These references treat focus as a first-class system requirement — explicit focus-ring tokens, documented focus-trap patterns for modals and drawers, and skip-links built into page-shell components. They set the bar for what 'accessible' means at the component level.
- 01Every interactive component has a documented focus state with a visible focus ring (not :focus { outline: none }).
- 02Modals and drawers trap focus on open; restore focus to the trigger on close.
- 03Page-shell components include a skip-to-content link as the first focusable element.
- 04Focus order matches visual order; tabindex used sparingly and documented when used.
- 05Tokenized focus-ring color and offset so themes can adjust without touching components.
- 01Components ship with :focus { outline: none } and no replacement; keyboard users can't see where they are.
- 02Modal opens with focus on the close button, then doesn't return focus to the trigger on close — screen-reader users lose their place.
- 03No skip-link; screen-reader users tab through 30 nav items before reaching content on every page.
GOV.UK Design System
UK Government
Focus state
High-visibility yellow focus ring on every interactive element — accessibility taken so seriously it's part of the brand.
U.S. Web Design System
U.S. Government
USWDS focus state + skip link
U.S. government accessibility floor — every component documents focus state, every page-shell ships a skip-link by default.
Radix UI
WorkOS
Focus management primitives
FocusScope, FocusGuard, and trap primitives that handle the hard parts (modal focus trap, restoration on close) at the library layer.
NHS Design System
National Health Service
Focus + keyboard expectations
Every component documents keyboard interaction patterns and screen-reader behavior — production-grade healthcare accessibility.