outline: none Is One Line. It Blindfolds Every Keyboard User.

Why Sites Remove It

For years, browsers drew a focus ring whenever a button was clicked, not only when it was reached by keyboard. Designers saw a blue box appear around a button after every click, filed it as a bug, and the fix that spread through CSS resets, themes and component libraries was a single line: *:focus { outline: none; }.

That line removes the indicator from every focusable element on the site. A mouse user never notices, because a mouse user does not need it. A keyboard user presses Tab, focus moves somewhere, and the screen gives no sign of where. Filling a form means guessing which field you are in; activating a link means pressing Enter and hoping.

The original complaint no longer needs this fix. Browsers now show the ring on keyboard focus and generally not on a mouse click, and CSS has a selector, :focus-visible, that follows the same rule. Most resets that remove outlines today are left over from before that existed.

What WCAG Requires

2.4.7 does not require the browser's default ring. Any visible change works: a thicker border, a background change, an underline, a shadow. What it requires is that there be one, on every element a keyboard can reach.

The Four Ways the Indicator Disappears

The global reset. *:focus, a:focus or button:focus with outline: none and nothing else. The most damaging version, because it is one rule and it reaches every control.

The utility class with no partner. Tailwind's focus:outline-none on a button with no focus-visible:ring-* or focus-visible:outline beside it. It is copied from component examples one element at a time, so a site ends up with some controls that show focus and some that do not. Note that in Tailwind v4, outline-none now means outline-style: none; the transparent outline v3 used is called outline-hidden.

The ring nobody can see. The indicator exists but is a 1px pale blue line on a white page, or the same colour as the button it surrounds. It passes a presence check and fails the person looking for it.

The ring that is hidden. The indicator is fine, but the focused element is under a sticky header, behind a cookie banner, or clipped by overflow: hidden on its container. This is what WCAG 2.2 added 2.4.11 for.

The Fix

/* Fails 2.4.7: removes the ring everywhere, puts nothing back */
*:focus { outline: none; }

/* Passes: no ring on mouse click, a clear ring on keyboard focus */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #ffffff;   /* light halo so it shows on dark backgrounds too */
}

/* A sticky header must not cover what has focus (2.4.11) */
html { scroll-padding-top: 5rem; }

<!-- Tailwind: never a reset on its own -->
<button class="focus:outline-none">Save</button>            <!-- no indicator -->

<button class="focus:outline-none focus-visible:ring-2
               focus-visible:ring-blue-700 focus-visible:ring-offset-2">
  Save
</button>                                                   <!-- passes -->

One caution about rings made only of box-shadow: Windows forced-colors (high contrast) mode removes box shadows, so a shadow-only ring disappears for exactly the users most likely to need it. Keeping a real outline, even a transparent one (outline: 2px solid transparent), means forced-colors mode has something to draw.

How to Test It Without Any Tool

1. Put the mouse aside. Click the address bar and press Tab.
2. After every press, you should be able to say at a glance which element has focus. If you have to look for it, the indicator is too weak; if you cannot find it, it is gone.
3. Tab through the header, a form, a modal and the footer. Resets often apply to one component library and not another, so one section passing does not mean the page does.
4. Scroll to the bottom and Shift+Tab back up. Focus disappearing under a sticky header is easiest to see in this direction.

How to Check Your Own Page

The checker at the top of this article reads the HTML and inline CSS your page serves and lists every :focus rule, inline style and outline-none utility class that removes the outline with no replacement in the same rule or on the same element. A :focus:not(:focus-visible) rule is the correct pattern and is not reported. These are flagged for review rather than counted, because an external stylesheet the reader does not load may put an indicator back.

The same read counts the two keyboard failures that need no judgement: elements with a click handler that Tab never reaches, and elements announced as buttons or links that a keyboard cannot focus, both under SC 2.1.1. It also reports how many Tab presses stand before your main content and whether your skip link goes anywhere (see the skip link guide).

Contrast of the ring and whether it is covered are questions about the rendered page. The whole-site scan loads every page in a real browser and names each WCAG 2.1 AA violation by criterion, with the element and the page it is on, and the checker's result hands your domain straight to it.

Frequently Asked Questions