Focus

Focus is the state of being the active recipient of keyboard input. Only one element on a page can hold focus at any moment, and the visual indicator of that state — the focus ring — is the single most important affordance for keyboard, switch, and screen-reader users.

Why focus matters

A meaningful share of users navigate the web entirely without a mouse:

• Keyboard-only users with motor disabilities that make pointing difficult or impossible.
• Switch-input users scanning interfaces via single-button or sip-and-puff devices.
• Screen-reader users, who route through the keyboard interface even on touchscreens.
• Voice-control users (“Click the Submit button”) whose tools resolve commands by matching focusable elements.

For all of them, focus is the cursor. Where the focus is, where it’s about to go, and what it looks like determines whether the page is usable at all.

WCAG’s focus rules

WCAG 2.x and 2.2 have several criteria centred on focus:

• 2.1.1 Keyboard (A) — all functionality must be operable from the keyboard.
• 2.1.2 No Keyboard Trap (A) — keyboard users must be able to move focus away from any focusable element using only the keyboard.
• 2.4.3 Focus Order (A) — focus order must be logical and meaningful.
• 2.4.7 Focus Visible (AA) — the focused element must have a visible indicator.
• 2.4.11 Focus Not Obscured (AA, new in WCAG 2.2) — sticky headers, cookie banners, and floating chat widgets cannot completely hide a focused element.
• 2.4.13 Focus Appearance (AAA, new in 2.2) — the focus indicator must meet specific area and contrast thresholds.

Common failure patterns

• outline: none with no replacement. Designers strip the default ring because it doesn’t match the visual language, and forget to replace it with a styled equivalent. This is a Level AA failure and the single most common one.
• Focus only on :focus-visible, not :focus. Modern best practice uses :focus-visible so the ring only shows for keyboard navigation, not mouse clicks. Fine — but the indicator on :focus-visible still needs to meet AA contrast.
• Lost focus after dynamic actions. After closing a modal, focus must return to the trigger element. After deleting a row, focus must move to a sensible neighbour. Otherwise the user lands somewhere arbitrary (often the document body) and has to start tabbing from the top.
• Hidden focus under sticky chrome. A focused link 50 pixels from the top of the page sits behind the sticky header that’s also 50 pixels tall. The user tabs into apparent emptiness. Set scroll-padding-top equal to the header height, or detect overlap and scroll the focused element into view.

The fastest manual audit

Tab through every page from the address bar to the footer. If at any point you can’t see where focus is, can’t reach an interactive control, or get stuck in a focus trap, the page fails 2.4.7 or 2.1.2.