WCAG 2.4.7 — Focus Visible

Missing Visible Focus (CSS outline:none)

What is this issue?

This issue specifically addresses the widespread practice of removing focus indicators using CSS outline: none or outline: 0 without providing any replacement focus style. While the general "Missing Focus Indicator" problem covers all cases of invisible focus, this entry focuses on the deliberate CSS suppression of focus outlines -- the single most common cause of WCAG 2.4.7 (Level AA) failures.

The pattern typically appears in three forms: a global reset rule like *:focus { outline: none; }, a framework or library CSS reset that includes outline removal, or individual component styles that suppress the outline on specific interactive elements. In all cases, the developer or designer has actively removed the focus indicator without understanding the accessibility consequences.

The CSS :focus-visible pseudo-class, now supported in all modern browsers, provides the ideal solution. It applies focus styles only when the browser determines the user is navigating by keyboard, meaning mouse clicks do not show a focus ring but Tab key navigation does. This addresses the designer's aesthetic concern while maintaining accessibility for keyboard users.

Impact on users

When CSS outline: none is applied globally, every single interactive element on the page becomes invisible to keyboard navigation. Users press Tab and have no visual feedback whatsoever about which element is focused. They are navigating completely blind, unable to see what they will activate if they press Enter.

The impact is especially severe on complex pages with many interactive elements. A page with 50 links and buttons where focus is invisible requires the user to either count Tab presses, try to detect very subtle visual changes, or simply give up and use a different site. For users with motor disabilities who must use keyboard navigation, there is no workaround.

This is not a theoretical concern. The WebAIM Million survey consistently finds missing or insufficient focus indicators among the top 10 most common accessibility errors on the web. The CSS outline: none pattern is directly responsible for the majority of these failures.

Code example

Before (non-compliant)
/* Global focus suppression */
*:focus {
  outline: none;
}

/* Framework reset example */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: none;
  border-color: inherit;
}

/* Component-level suppression */
.nav-link:focus {
  outline: none;
}
After (compliant)
/* Use :focus-visible for keyboard-only focus */
*:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Suppress outline only for mouse clicks */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Component-specific focus style */
.nav-link:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 3px solid ButtonText;
  }
}

How Scrutia detects this issue

Scrutia scans your site's CSS (including external stylesheets and inline styles) for rules that set outline: none, outline: 0, or outline-width: 0 on focusable elements. It then checks whether a replacement focus style is provided via :focus-visible, box-shadow, border, or other visual changes. Elements where focus is suppressed without a replacement are flagged with the specific CSS rule responsible and a suggested :focus-visible replacement.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

Why is :focus-visible better than :focus?
:focus triggers on all focus events, including mouse clicks, which creates the unwanted focus rings that designers dislike. :focus-visible only triggers when the browser detects keyboard navigation, showing focus rings only to users who need them. This satisfies both designers and accessibility requirements.
Is :focus-visible supported in all browsers?
Yes, as of 2023, :focus-visible is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browser support, you can use the focus-visible polyfill or provide a :focus fallback with :focus:not(:focus-visible) to hide it on mouse.
What if my CSS framework removes focus outlines?
Check your framework's reset or base styles for outline: none rules. Tailwind CSS, for example, removes the default outline but provides focus-visible: utility classes. Override the reset in your global styles with a :focus-visible rule that adds a visible focus indicator.

Does your site have this issue?

Scrutia scans your pages against WCAG success criteria and delivers actionable fixes. Results in 5 minutes.

Run a free audit