February 21, 2023 · reala11y team

Visible Focus Indicators: Don't Remove the Outline (WCAG 2.4.7)

Removing the focus outline breaks keyboard navigation. Here's why it matters for WCAG 2.4.7, and how to style a focus indicator that looks good and works.

There is a single line of CSS that quietly breaks keyboard accessibility on a huge number of WordPress sites:

:focus { outline: none; }

It usually gets added because the default browser focus ring looks “ugly” on a polished design. The intent is cosmetic. The effect is that anyone navigating with a keyboard loses the one cue that tells them where they are on the page. This post explains why that matters, what WCAG 2.4.7 actually asks for, and how to style focus well instead of hiding it.

Who relies on the focus indicator

Not everyone uses a mouse or a trackpad. People navigate the web with the keyboard for many reasons:

• Motor disabilities that make precise pointing difficult or impossible.
• Blind and low-vision users pairing a keyboard with a screen reader or magnifier.
• Power users who simply move faster with Tab and Enter.
• Anyone whose mouse just died.

For all of them, the focus indicator is the cursor. When you press Tab, focus moves from link to link, button to field. The visible ring is what answers the only question that matters: where am I right now? Remove it and the page still works mechanically, but the user is navigating blind. They tab, something somewhere has focus, and they have no idea what.

What WCAG 2.4.7 requires

Success Criterion 2.4.7 Focus Visible is a Level AA requirement: any keyboard-operable interface must have a mode where the keyboard focus indicator is visible. It is not new — it has been in the standard since WCAG 2.1 (2018) and carries straight through to WCAG 2.2, the current W3C Recommendation as of 5 October 2023.

WCAG 2.2 went further and added two related criteria. 2.4.11 Focus Not Obscured (Minimum) (AA) says a focused element must not be entirely hidden behind a sticky header or cookie banner. 2.4.13 Focus Appearance (AAA) sets minimum size and contrast targets for the indicator itself. The direction of travel is clear: focus is not a detail, it is core to operability.

The bar for 2.4.7 is genuinely low. You do not need anything clever. You need the indicator to exist and be visible. The most common failure is removing it on purpose.

Why “outline: none” is the trap

The browser default ring is doing real work. The mistake is removing it without putting anything back:

/* The problem: focus is now invisible everywhere */
*:focus { outline: none; }

Two things make this worse than it looks:

• It is often applied with * or to every button and link at once, so it nukes focus site-wide in one declaration.
• It frequently rides along in a CSS reset or a theme’s stylesheet, so site owners inherit it without ever choosing it.

If you take one thing away: never remove a focus style without replacing it. Removing the default and adding nothing is the failure.

How to style focus well

You can absolutely make focus match your brand. The trick is :focus-visible, which targets keyboard focus and leaves mouse clicks alone — so buttons don’t get a ring on click, but keyboard users still get a clear one.

/* Replace the default with something on-brand */
:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Safe fallback for older browsers */
:focus { outline: 3px solid #1d4ed8; }
:focus:not(:focus-visible) { outline: none; }

A few practical guidelines:

• Make it visible against every background it can land on. A dark ring vanishes on a dark button. Test light and dark surfaces.
• Don’t rely on color alone. A change in outline width, an offset, or a shadow holds up better than a subtle hue shift.
• Use outline, not just border. Swapping a border resizes the element and shifts the layout; outline is drawn outside the box and doesn’t move anything.
• Give it breathing room with outline-offset so the ring reads as separate from the control.
• Keep it instant. A focus ring that fades in delays the one piece of feedback the user needs immediately.

Test it the way your users will: click into the page, then put the mouse down and press Tab repeatedly. Every link, button, and form field should announce itself with an unmistakable ring, and you should always be able to see where you are. If focus disappears even once, that is a 2.4.7 gap.

Where reala11y fits

A scanner can spot a missing or suppressed focus indicator and tell you which interactive elements are affected — that’s what reala11y’s focus-visible rule does as part of its WCAG 2.2 checks. Because reala11y fixes code-level issues at the source rather than bolting on an overlay widget, the visible-focus styling it can apply ships in the page itself, so keyboard users and assistive technology get the real thing. For how that detect-and-fix model works end to end, see how it works, and for the criteria themselves see our WCAG 2.2 guide.

The honest takeaway

Visible focus is one of the cheapest accessibility wins there is: delete one bad line, write a few good ones. Automated tooling can flag a missing indicator and a tool like reala11y can help you put a real one back — but it won’t tell you whether your chosen ring is genuinely legible on every background, and it can’t confirm your whole keyboard journey makes sense. Automated checks catch roughly 30–40% of WCAG issues by criteria; the rest needs a human tabbing through the page. So fix the outline, then go press Tab yourself. It is the fastest way to understand what your keyboard users actually experience.