Reviewed October 31, 2026

Focus Visible Styles: The Outline Your Theme Deleted

Somewhere in your theme CSS there is a line that removed the focus outline and replaced it with nothing. Why that single rule strands keyboard shoppers, and how to restore an indicator that survives your design system.

The line of CSS that did it

Open your theme stylesheet and search for outline set to none. It is in there, usually inside a reset or a global rule applied to links and buttons, added years ago because the default browser outline looked untidy in a design review. WCAG 2.1 Success Criterion 2.4.7, Focus Visible, requires a visible focus indicator at Level AA. The default outline satisfied it. The reset deleted the compliance along with the ugliness, and nobody rechecked because mouse users, which is to say everyone in the review meeting, never see focus styles at all.

For a keyboard shopper the effect is total. Focus is their cursor. Remove the indicator and they are tabbing through your header, your filters, and your checkout with no idea where they are on the page. Every other fix you ship, labels, roles, keyboard operable controls, is wasted if the person using them cannot see where focus landed. This is why experienced auditors check focus visibility before anything else. It is the floor.

What counts as visible enough

The indicator has to be perceivable against the page, which in practice means a solid outline or border change with real contrast against adjacent colors, not a faint shadow in a shade of the brand gray. WCAG 2.2 added a stricter criterion for focus appearance at AAA and tightened expectations overall, and the direction of travel is clear: thicker, offset outlines that do not get clipped by the element's own box. Two pixels, offset by two pixels, in a color that contrasts with both the element and the background is a working default almost everywhere.

Two failure patterns survive even in stores that restored an outline. The first is the indicator styled only for links, leaving buttons, inputs, and custom controls bare, which is exactly backwards since checkout is mostly buttons and inputs. The second is an outline color chosen from the brand palette that vanishes on product photography and sale banners. Test focus on your busiest hero image, not on a white page, because that is where indicators go to die.

Focus visible, not focus always

Modern CSS gives you the distinction designers actually wanted. The focus-visible pseudo class applies the indicator when the browser judges the user is navigating by keyboard, and withholds it for mouse clicks. That means the original complaint, ugly outlines appearing when someone clicks a button, is solved by the platform. The reset can come out and focus-visible styles go in, and mouse users will never see a thing while keyboard users get a clear indicator on every tab stop.

Do not stop at the global rule. Accordions, tabs, carousels, and filter chips in your theme all carry component level styles, and several will override or clip the global indicator. Overflow hidden on a carousel track is a classic outline clipper. Audit component by component with the keyboard, in the order a shopper meets them: header navigation, search, collection filters, product options, cart drawer, checkout. A global fix that dies inside the cart drawer is a press release, not a repair.

The thirty minute store check

Unplug your mouse, or just promise not to touch it, and tab from the top of your homepage. You should be able to answer one question at every stop: where am I? The moment you cannot, note the page and the element. Then do the same pass inside checkout up to the payment step. Most stores find three to five dead zones in the first pass, usually icon buttons, the search toggle, and anything built as a clickable image.

Fix at the design system level, not page by page. One well chosen focus-visible rule in the theme, plus component overrides where clipping occurs, holds across the whole store and survives redesigns better than spot repairs. And retire the habit that caused this: any future reset or theme update that touches outline styles gets a keyboard pass before it ships. It is a thirty minute habit protecting the shoppers your analytics cannot see leaving.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Star Ratings That Keyboard and Screen Reader Users Can Actually Use, Back in Stock Forms: Small Form, Complete Failure Modes, and Accessible Quantity Pickers: The Small Control That Breaks Carts.

Frequently asked questions

Why did my theme remove the focus outline?

Because the default browser outline looks untidy on mouse clicks, resets and themes commonly delete it. That solves a cosmetic issue for mouse users by removing the only position indicator keyboard users have, which fails WCAG 2.4.7.

What focus style passes WCAG?

A clearly visible indicator with strong contrast against the page, commonly a two pixel solid outline offset from the element. It must appear on links, buttons, inputs, and custom controls, and survive busy backgrounds like hero images.

Will focus styles annoy mouse users?

Not if you use the focus-visible approach. Browsers show those styles for keyboard navigation and suppress them for mouse clicks, so mouse users see no change while keyboard users get a clear indicator.

Can an automated scan check focus visibility?

Scans can flag a global outline removal, but they cannot judge whether an indicator is visible on your photography or clipped inside your cart drawer. A keyboard pass through the store is the reliable test.