WCAG 2.4.7 — Focus Visible

Missing Focus Indicator

What is this issue?

A missing focus indicator means that when a user tabs through interactive elements on a page -- links, buttons, form fields, and custom controls -- there is no visible outline or highlight showing which element currently has keyboard focus. WCAG Success Criterion 2.4.7 (Level AA) requires that the keyboard focus indicator is visible on all interactive elements.

This problem is overwhelmingly caused by CSS resets and design choices that remove the browser's default focus outline. The infamous `outline: none` or `outline: 0` rule, often applied globally via `*:focus { outline: none; }`, strips away the default blue or dotted outline that browsers provide. Designers remove it because they consider it visually unappealing, but without providing an alternative focus style, they make the site unusable for keyboard navigators.

Modern CSS frameworks and reset stylesheets sometimes include this anti-pattern by default. Even when a custom focus style is added, it may have insufficient contrast against the background, be too subtle to notice (a barely-visible 1px border change), or only be applied to some elements while others remain invisible when focused.

Impact on users

For keyboard-only users -- including people with motor disabilities, power users, and anyone temporarily unable to use a mouse -- a missing focus indicator is like navigating a website blindfolded. They press Tab and have no idea where they are on the page. They cannot see which link they are about to activate, which form field they are typing into, or which button they are about to press.

This leads to wrong clicks, accidental form submissions, and a deeply frustrating experience. Users often resort to pressing Tab repeatedly while watching for subtle visual changes, or they give up entirely and leave the site.

Screen reader users are somewhat less affected because their assistive technology announces the focused element, but sighted keyboard users receive no such feedback. An estimated 15-20% of web users rely on keyboard navigation at least some of the time, making this a high-impact issue that affects a large audience.

Code example

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

/* Or via a framework reset */
button:focus,
a:focus,
input:focus {
  outline: 0;
  box-shadow: none;
}
After (compliant)
/* Visible focus for keyboard users only */
*:focus-visible {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* High-contrast focus for dark backgrounds */
.dark *:focus-visible {
  outline-color: #93c5fd;
}

How Scrutia detects this issue

Scrutia analyzes the computed CSS of every focusable element on your pages to detect missing or invisible focus indicators. It checks for `outline: none` rules without replacement styles, evaluates the contrast ratio of custom focus indicators against their backgrounds, and flags elements where the focus state produces no visible change. Each finding includes the CSS selector and a suggested focus style.

Check your site for this issue

Scrutia audits your site against WCAG criteria in minutes.

Free audit

Frequently Asked Questions

Why do designers remove the focus outline?
The browser's default focus outline (a blue or dotted ring) is often considered visually inconsistent with a site's design. Designers remove it for aesthetic reasons, but the correct approach is to replace it with a custom focus style that matches the design system while remaining clearly visible.
What is the difference between :focus and :focus-visible?
:focus applies whenever an element receives focus, whether by mouse click or keyboard. :focus-visible only applies when the browser determines the focus should be visible -- typically on keyboard navigation. Using :focus-visible lets you show focus rings for keyboard users while hiding them for mouse clicks.
What makes a good focus indicator?
A good focus indicator has at least a 3:1 contrast ratio against the surrounding background, is at least 2px thick, and surrounds the element (rather than just changing one border). The WCAG 2.2 enhanced criterion (2.4.13) provides even more specific guidance on focus indicator size and contrast.
Does Tailwind CSS remove the focus outline?
Tailwind's Preflight (CSS reset) does reset the browser's default focus outline, but it provides focus utility classes like focus:ring-2 and focus-visible:outline-2 that make it easy to add accessible focus styles. The key is to actually use these classes on your interactive elements.

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