Visible focus indicators: why removing outlines hurts users

Somewhere in nearly every stylesheet written in the last fifteen years sits a line that removes the outline from buttons and links. It was added because a designer saw a blue ring around a clicked button and called it a bug. It is not a bug. For a large group of visitors that ring is the only thing telling them where they are on the page. This article explains what visible focus indicators do, who depends on them, why outline: none causes so much damage, and what to use instead.

What a focus indicator actually is

At any moment, exactly one element on a page can have keyboard focus: a link, a button, a field, a checkbox. Typing or pressing Enter acts on that element. The focus indicator is the visual marker showing which one it is.

For a mouse user, the pointer answers the question "where am I?" continuously. Someone pressing Tab has no pointer. The focus ring is their cursor, and without it the page becomes a guessing game where pressing Enter might submit a form, follow a link or do nothing at all.

Browsers provide a default indicator for this reason. It is not decorative; it is core navigation.

Who relies on it

Keyboard navigation is not a rare edge case, and it extends well beyond the group most people picture.

• People with motor disabilities who cannot use a mouse accurately, including those using switch devices, head pointers or sip-and-puff controls.
• Blind and low-vision users, whose screen reader announcements follow focus. Sighted colleagues helping them also need to see where focus sits.
• People with low vision who do not use a screen reader, often zoomed in, for whom a clear indicator is the difference between finding the control and scrolling around looking for it.
• Anyone with a temporary injury, such as a broken wrist or a recent surgery.
• Power users and data entry staff who tab through forms because it is faster than reaching for the mouse.
• People on a laptop with a failing trackpad, or using a TV or kiosk with a remote.

There is also a standards angle. WCAG success criterion 2.4.7, Focus Visible, requires that keyboard focus be visible, and WCAG 2.2 added criteria on how much of the indicator may be obscured and how it should appear. Most accessibility policies expect this to be met.

What outline: none breaks

The usual culprit is a blanket rule such as *:focus { outline: none; } or the same applied to buttons and links, often copied from a CSS reset or a theme.

The result is a site where tabbing produces no visible change whatsoever. The page looks identical while focus travels invisibly through the menu, the banner links, the cards and the footer. People try it, see nothing happen, and assume the keyboard does not work at all.

A particularly nasty variant is removing the outline and not replacing it in only some components, so focus is visible in the form but not in the navigation. That is arguably worse, because the person cannot tell whether focus vanished or moved somewhere unexpected.

Related problems worth checking at the same time:

• A custom focus style so subtle it is effectively invisible, such as a one-pixel light grey line on white.
• An indicator hidden behind a sticky header or a cookie banner when focus reaches an element near the top.
• Elements with tabindex="-1" that removed them from the tab order entirely, so focus never arrives.
• Focus on an element scrolled out of view because the page did not scroll with it.

Why the ring appeared on click, and how focus-visible fixes it

The original complaint was real. Older browsers showed the focus ring after a mouse click too, so clicking a button left a ring around it, which looked untidy to designers. Removing the outline solved the appearance and broke the function.

The modern answer is the :focus-visible pseudo-class. Browsers apply it when they judge that the user needs to see focus, which in practice means keyboard and similar input, and skip it for ordinary mouse clicks. So you can style :focus-visible with a strong, obvious indicator and mouse users will never see it.

Support is now broad across current browsers. A safe pattern is to keep a plain :focus style as a fallback and add the stronger :focus-visible style on top, so older browsers still show something rather than nothing.

The one rule that never changes: never remove an outline without providing a replacement in the same rule. If your stylesheet contains outline: none, there must be a visible focus style immediately alongside it.

Finding missing focus states on your site

This takes five minutes and needs no tools.

1. Open your home page, click once on the address bar and press Tab repeatedly.
2. Watch for a clear visual change on every stop: menu items, buttons, banner links, cards, footer links.
3. Note any stop where nothing visibly changes, and any point where focus disappears behind a sticky element.
4. Repeat on your main form and on the checkout or enquiry flow.
5. Search your CSS for outline: none and outline: 0 and check each occurrence for a replacement style.
6. Try the same with a dark section and over an image background, where a dark indicator can vanish.

Automated tools are weak here, because they cannot judge whether a style is perceivable. Your eyes and the Tab key are the better instrument.

Putting it right and keeping it right

Fixing this is usually a small change in one stylesheet, and it is one of the highest-value accessibility corrections available. Remove the blanket outline reset, add a clear focus-visible style to your base styles, and add a Tab-through check to your release routine so it does not creep back with the next theme update.

If your theme fights you on this, or focus is broken inside a component you did not write, our team can sort it out as part of an accessibility pass on your business website.

Frequently asked questions

Is it ever acceptable to remove the focus outline?

Only when you replace it with something equally visible in the same rule. Removing it outright fails the Focus Visible requirement and breaks keyboard navigation.

Does the default browser outline satisfy accessibility guidelines?

Usually yes, and leaving it alone is far better than deleting it. A custom style is worth having mainly to guarantee contrast against your own colours.

How do I test focus on mobile?

Pair a Bluetooth keyboard with your phone and tab through the page, which is exactly how some people with motor disabilities use a mobile device.

My site uses a framework. Does it handle focus for me?

Some component libraries provide sensible focus styles, but many themes strip them. Check by tabbing through your real pages rather than trusting the documentation.