The Missing Focus Outline: Why Keyboard Users Get Lost on Your Website

There is a piece of CSS that lives on a startling number of small-business websites. It is one line long, it was almost certainly added on purpose, and it quietly breaks the site for anyone who navigates with a keyboard:

*:focus { outline: none; }

Maybe you have never seen it. Maybe a designer added it years ago, or it came baked into your theme or page builder. But if your site has it, here is what it does: it removes the visible marker that tells keyboard users where they are on the page. To a person clicking with a mouse, nothing looks different. To a person who cannot use a mouse, the website becomes a maze with the lights turned off.

This is the focus-outline problem, and it is everywhere. It is the close cousin of removing the underlines from your links, and like that one, it is invisible to the people who created it. Let’s fix that.

What the focus outline actually is

When you use a website with a mouse, you point and click. You always know what you are about to interact with, because your cursor is sitting right on top of it.

Keyboard users do not have a cursor. Instead, they press the Tab key to move from one interactive element to the next: link, link, button, form field, link, and so on. To know where they are, they rely on a visual marker that the browser draws around whatever element is currently “focused.” By default, browsers draw a ring, a glow, or a box around that element. That marker is the focus indicator, and it is the keyboard user’s cursor.

Plenty of people navigate this way, and not all of them think of themselves as having a disability:

  • People with motor disabilities who cannot grip or move a mouse precisely.
  • Blind and low-vision people using screen readers, which are driven entirely by the keyboard.
  • People recovering from an injury, like a broken wrist or repetitive strain.
  • Power users who simply find the keyboard faster.

For every one of them, the focus indicator is not decoration. It is the single piece of information that answers the question “where am I right now?” Remove it, and the answer becomes “no idea.”

Why so many sites remove it

Nobody removes the focus outline out of malice. They remove it because the browser default is, frankly, a bit ugly. Most browsers draw a thin dotted or solid ring, and on a carefully designed site that ring can look like a glitch. So at some point a designer decides it clashes with the brand, drops in outline: none, and moves on. The site looks cleaner in every screenshot, every demo, every glance with a mouse.

The problem is that the screenshot is a lie. It shows the site as a mouse user experiences it, which is the one group of people who never needed the outline in the first place. The people who do need it are exactly the people who are not in the room when that design decision gets made.

It also creeps in through the back door. Many CSS “reset” files, theme frameworks, and page builders strip the outline globally so their own custom styles look consistent. You may have inherited the problem without ever typing that line yourself.

The 30-second test anyone can run

You do not need DevTools, plugins, or any technical knowledge to find out whether your site has this problem. Here is the whole test:

  1. Open your website in any browser.
  2. Click once in the address bar at the top (this puts your starting point above the page).
  3. Press the Tab key, slowly, over and over.

Watch the screen. As you press Tab, something visible should move around the page, landing on each link, button, and form field in turn. You should always be able to point at the screen and say “it is there now.”

If you press Tab and nothing visible changes — no ring, no highlight, no box, just the page sitting there while some invisible thing moves around behind the scenes — your focus indicator is broken. That is the experience every keyboard user has on your site, all day, on every page.

While you are at it, keep tabbing all the way through your main menu, a form, and your checkout or contact button. The focus indicator should be easy to see at every stop, not just on some elements.

What the law actually requires

This is not just a nicety, and that matters because of where accessibility law has landed. (None of what follows is legal advice — it is a plain-English summary, and a lawyer should weigh in on your specific situation.)

The international standard nearly every accessibility law points to is the Web Content Accessibility Guidelines (WCAG). One of its rules, 2.4.7 Focus Visible, is a Level AA requirement, and it says plainly that any element you can operate with a keyboard must show a visible focus indicator when it is focused. Removing the outline with no replacement is a direct, unambiguous failure of that rule.

WCAG 2.2, the current version, added a related rule, 2.4.11 Focus Not Obscured, also at Level AA. It says the focused element must not be completely hidden behind something else, like a sticky header or a cookie banner that covers the spot where focus lands. So even sites that keep their outline can fail if a sticky header sits on top of it.

Here is why those rules have teeth:

  • The European Accessibility Act (EAA), in force since June 2025, requires a wide range of businesses selling to EU consumers to meet WCAG 2.1 Level AA. Focus Visible is part of that.
  • In the United States, the Americans with Disabilities Act (ADA) is regularly applied to websites, and WCAG AA is the benchmark courts and demand letters lean on. “Keyboard users cannot tell where they are” is a common, easily demonstrated complaint.

The encouraging part: this is one of the cheapest WCAG failures to fix. It is usually a few lines of CSS, not a rebuild.

How to fix it the right way

The wrong fix is to leave the outline removed and hope nobody notices. The right fix is to give keyboard users a focus indicator that is clearly visible and fits your brand. You have a few options, from simplest to best.

Option 1: Just stop removing it. If your only problem is a blanket outline: none, the simplest fix is to delete that line and let the browser default come back. The default is not pretty, but it is far better than nothing. If you have a page builder or theme with a “custom CSS” box, this is often where the offending line lives.

Option 2: Replace it with a focus style you like. You do not have to accept the browser’s dotted ring. You can design your own indicator — a thicker outline in your brand color, a glowing shadow, a background change — as long as it is genuinely easy to see. The key word is visible: a barely-there 1-pixel line in pale gray is technically an indicator but practically useless.

/* A clear, branded focus indicator */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Option 3: Use :focus-visible to please everyone. The reason designers removed the outline in the first place is usually that it appeared after a mouse click, which looked odd. Modern browsers solved this with a CSS feature called :focus-visible. It shows your focus style when someone navigates with the keyboard, but not when they click with the mouse. That means mouse users get the clean look the designer wanted, and keyboard users get the indicator they need. Everybody wins. The snippet above already uses it.

A few things to get right when you design your indicator:

  • Make it high contrast. The indicator should stand out clearly against both the element and the page background. A good rule of thumb is to make it as obvious as the underlines and color contrast you would want for text.
  • Do not rely on color alone. Changing a button from blue to slightly-darker-blue on focus is not enough; many people will not perceive it. Use a shape change too — an outline, a ring, a shadow.
  • Make it big enough to notice. A thick outline (2 to 3 pixels) with a small offset reads far better than a hairline.
  • Test it on every type of element, including links, buttons, form fields, and any custom controls like dropdowns or sliders.

Where this breaks most often

A few specific places are worth checking by hand, because they are the usual suspects:

  • Page builders and themes. Tools like Elementor, Divi, and many WordPress and Shopify themes ship their own focus styling — sometimes good, sometimes a blanket removal. Check the “custom CSS” or “additional code” area of your builder for outline: none.
  • Custom buttons made from the wrong element. When a button is built out of a div or an image instead of a real <button> or link, it often cannot receive keyboard focus at all, so there is nothing to outline. That is a deeper problem; the element needs to be a genuine interactive control first.
  • Skip links and menus. A “skip to content” link and dropdown menus are operated by keyboard almost exclusively, so a missing focus indicator hits them hardest.
  • Cards and tiles. Large clickable cards (a whole product tile that links somewhere) need an obvious focus style around the entire card, which themes frequently forget.

The short version

If you remember nothing else, remember this:

  1. Removing the focus outline makes your site unusable for keyboard users and fails WCAG 2.4.7, a Level AA rule the EAA and ADA both lean on.
  2. You can find the problem in 30 seconds by pressing Tab and watching whether anything visible moves.
  3. The fix is cheap: stop hiding the outline, or replace it with a clear, branded indicator using :focus-visible so mouse users keep the clean look and keyboard users get what they need.
  4. Make the indicator high-contrast, more than just a color change, and test it on links, buttons, and forms.

A visible focus indicator is one of the highest-impact, lowest-effort accessibility fixes you can make. It costs almost nothing and it restores your site for a group of people who currently cannot use it at all.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.