Accessible Focus States: Designing Visible Keyboard Focus

Why focus states matter

People who use a keyboard, switch device or screen magnifier move through a page one element at a time. The focus indicator is the only way they know where they are. Removing the browser outline without a replacement is one of the most common accessibility failures.

What WCAG 2.2 requires

Success criterion 2.4.7 Focus Visible (level AA) requires that any keyboard-operable interface has a mode where the focus indicator is visible. WCAG 2.2 added 2.4.13 Focus Appearance (level AAA), which describes a strong indicator: at least as large as the area of a 2 CSS pixel thick perimeter of the component, with a contrast ratio of at least 3:1 between the focused and unfocused states.

:focus-visible

MDN explains that :focus-visible applies when an element has focus and the browser decides, using heuristics, that focus should be shown, typically for keyboard use. That lets you show strong focus rings for keyboard users without showing them every time someone clicks a button with a mouse. Use it instead of removing outlines.

Designing the ring

Practical guidance:

• Use an outline or ring with an offset so it does not blend into the element.
• Check contrast against every background the element can appear on; a two-colour ring helps.
• Keep it consistent across components, defined as a token in your design system.
• Never rely on a subtle colour change alone.
• Make sure the focused element is not hidden behind sticky headers.

Focus and motion

A focus ring can appear with a very short transition, but it should feel instant. Avoid animations that delay the ring or move the element, and for custom canvas-drawn components, make sure there is still a real focusable element in the page so keyboard users can reach it.