Focus Visibility (WCAG 2.4.7)

What is it?

WCAG Success Criterion 2.4.7 (Focus Visible) requires that any keyboard-operable user interface has a mode where the keyboard focus indicator is visible. In practice, this means that when a user navigates with Tab, the currently focused element must be visually distinguishable from unfocused elements. WCAG 2.4.11 (AA in 2.2) additionally requires the focus indicator to meet minimum size and contrast requirements.

Why it matters

Keyboard-only users — people with motor impairments, power users, and those with temporary injuries — navigate entirely by Tab, Enter, and arrow keys. Without a visible focus indicator, they cannot tell where they are on the page. This effectively makes the product unusable. The most common cause of this failure is the CSS rule outline: none applied globally in resets or base stylesheets — a widespread bad practice.

Best Practices

• Never use outline: none or outline: 0 without providing a custom focus indicator that is equally or more visible.
• Design custom focus styles that are visible, high-contrast, and on-brand. A 2px solid outline in your accent color typically works well.
• Use :focus-visible instead of :focus in CSS. :focus-visible only shows the focus ring when the user is navigating by keyboard — not when clicking with a mouse. This prevents the "ugly ring on click" complaint while maintaining keyboard accessibility.
• Ensure the focus indicator has at least 3:1 contrast against adjacent colors (WCAG 2.4.11, AA in WCAG 2.2).
• The focus area (the change visible when an element is focused) must have a minimum area of at least the perimeter of the component times 2px (WCAG 2.4.11).
• Test keyboard navigation on every interactive component: buttons, links, form inputs, dropdowns, modals, date pickers, and custom widgets.
• Ensure focus order follows a logical reading sequence — top-to-bottom, left-to-right for LTR layouts.
• Manage focus explicitly when opening and closing modals: focus must move to the modal on open, and return to the trigger on close.

Common Mistakes

• The CSS reset that removes outlines: *, *::before, *::after { outline: none } — the most common single cause of keyboard inaccessibility.
• Providing a focus indicator that only changes color — fails if the color change doesn't meet contrast requirements.
• Focus styles that rely on a drop shadow that blends with the background in dark mode.
• Forgetting to test focus visibility after a redesign — it's often stripped accidentally when updating base styles.
• Using :focus instead of :focus-visible and then removing focus styles entirely because they "look bad on click."
• Not managing focus when opening modals — screen reader and keyboard users are left in the background content.
• Custom focus styles that are smaller or less visible than the default browser outline.

Checklist

Research & Theory

Real-World Examples