Focus Not Visible

Focus not visible occurs when a keyboard-focusable element receives keyboard
focus but shows no visible indication of that focus state. Sighted keyboard
users — including people who cannot use a mouse due to motor disabilities —
have no way of knowing which element is currently active, making the interface
effectively unusable by keyboard alone.
^[1]

---

Who it affects

Visible focus indicators are essential for:

• Users with motor disabilities who cannot use a mouse
• Users with attention or cognitive disabilities who need visual confirmation
  of their position in the interface
• Power users navigating by keyboard for efficiency
• Anyone using a keyboard in a context where a mouse is unavailable

^[2]

---

The most common cause

The single most common cause is a global CSS reset containing:

outline: none or outline: 0

This removes the browser's default focus ring from every focusable element
simultaneously. It is frequently added by developers who find the default
blue ring visually unappealing, without providing any replacement.

Removing the default focus indicator without replacing it is a WCAG failure
and in many jurisdictions a legal compliance issue.

---

WCAG 2.2 requirements

WCAG 2.4.7 (AA) requires that keyboard focus is visible. WCAG 2.2 introduced
an enhanced criterion:

2.4.11 Focus Appearance (AA) requires that the focus indicator:

• Has a minimum area equal to a 2 CSS pixel perimeter around the component
• Has a contrast ratio of at least 3:1 between focused and unfocused states

^[3]

---

How to detect it

To test manually:

1. Tab through every interactive element on the page
2. Verify each element shows a visible change when focused
3. Check buttons, links, inputs, checkboxes, select menus, and custom
   components
4. Check in both light and dark mode if applicable

Automated scanners can detect outline: none in CSS but cannot assess
whether alternative focus styles meet the visual requirement.

---

How to fix it

Remove any global outline: none rules that are not paired with a replacement
focus style. Provide a consistent, high-contrast focus indicator for all
interactive elements:

• Use outline with sufficient colour contrast against the background
• Consider a combined outline and box-shadow for a more polished appearance
• Use :focus-visible instead of :focus to show indicators only for keyboard
  navigation — this avoids the ring appearing on mouse click while preserving
  it for keyboard users

Never sacrifice keyboard usability for visual design preferences.
^[1]

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.7: Focus Visible. https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.11: Focus Appearance. https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html ↑
3. WebAIM. Keyboard Accessibility — Focus. https://webaim.org/techniques/keyboard/#focus ↑