WCAG 10.7 — On every web page, is the focus visible for every element that receives focus?

Invisible focus indicator

The issue

The focus indicator is the visual marker that shows which element on the page is currently selected by keyboard. WCAG success criterion 2.4.7 requires that focus be visible for every interactive element. Without a visible focus indicator, navigating by keyboard is like driving at night without headlights: the user does not know where they are on the page. The CSS line 'outline: none' or 'outline: 0' is the number one cause of this problem. Many developers and designers remove the browser's default focus outline because they find it 'ugly' — without replacing it with a visible alternative indicator. The result: when the user presses Tab, they see nothing happening visually even though the focus is actually moving from one element to another behind the scenes. Other common causes include: a focus indicator whose color is too close to the background (a blue outline on a blue background), an indicator that is too thin or too small to be perceivable, or an indicator hidden by overflow:hidden on a parent element. Some CSS frameworks (Bootstrap, Tailwind, Material UI) historically included CSS resets that removed the focus outline. Recent versions have fixed this, but older sites using these frameworks may still be affected. The best practice is to never remove the focus outline without providing a visible alternative that is at least as discernible. WCAG 2.2 (criterion 2.4.13) has strengthened requirements: the focus indicator must have a minimum size and sufficient contrast with the background to be clearly perceivable.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

For a keyboard user, the absence of a focus indicator makes navigation chaotic. They press Tab and do not know which link, button, or field they are on. They must press Enter 'blindly' to see what happens. They may activate a link unintentionally, submit a form before finishing it, or miss an essential feature without seeing it. Visually impaired people who use the keyboard alongside a screen magnifier are particularly affected. With 200% zoom or more, only a small portion of the page is visible on screen: if the focus indicator is absent or barely visible, the user completely loses track of their position on the page. People with cognitive or attention disorders also benefit from the focus indicator to maintain their attention on the current element. Its absence increases cognitive load and makes interaction more tiring and error-prone.

Code example

Before (non-compliant)
/* CSS reset that removes focus */
*:focus {
  outline: none;
}

a:focus,
button:focus,
input:focus {
  outline: 0;
  box-shadow: none;
}
After (compliant)
/* Visible focus with clear indicator */
*:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Optional: remove outline only on mouse click */
*:focus:not(:focus-visible) {
  outline: none;
}

Frequently Asked Questions

Can I customize the appearance of the focus indicator?
Yes, and it is even recommended. The browser's default outline is a good safety net, but you can replace it with a custom style that better fits your brand guidelines. Use :focus-visible in CSS to apply an outline, box-shadow, or background color change. The key is that the indicator is clearly visible and sufficiently contrasted.
What is the difference between :focus and :focus-visible?
The :focus pseudo-class applies every time an element receives focus, including on mouse click. :focus-visible only applies when the browser determines the focus indicator should be visible — typically during keyboard navigation. This allows showing focus only when necessary, without displaying it on mouse clicks.
Must the focus indicator have a minimum contrast?
Yes. WCAG 2.2 (criterion 2.4.13, Level AAA) requires the focus indicator to have a contrast ratio of at least 3:1 with adjacent colors and a minimum size of 2px thickness around the entire perimeter of the element. The indicator must be sufficiently visible in all contexts.
How do I test focus visibility on my site?
Navigate your site using only the Tab key. You must see at every moment which element has focus. If focus visually 'disappears' at some point, inspect that element's CSS in DevTools and look for outline:none or outline:0 rules that suppress the indicator. Scrutia automatically flags elements whose focus is not visible.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit