Reviewed October 21, 2026

Focus visible styles: a quick storefront check that helps everyone

If keyboard shoppers cannot see where they are on your store, nothing else about your accessibility work matters. What focus visible means, the common theme mistakes, and a ten minute audit.

What focus visible actually means

Focus is the outline or highlight that shows which element on the page is currently active for keyboard navigation. Focus visible is the practice of showing that indicator when someone tabs through your store, while not forcing it on mouse users who click. Modern browsers and CSS make this distinction easy to support.

On a storefront, focus travels through the header, navigation, search, product grids, size selectors, quantity controls, and checkout buttons. If the indicator is invisible at any stop, a keyboard shopper is navigating blind. They cannot tell whether they are on add to cart or on a decorative element three tabs earlier.

The mistakes themes make most often

The classic error is a CSS reset that removes outlines globally and never replaces them. It ships in frameworks and starter themes, and stores inherit it without noticing. The second error is a focus style so faint, a one pixel dotted line in pale gray, that it technically exists and practically cannot be seen against product photography.

Custom components cause the third class of failure. Div based buttons, image based selectors, and app widgets often receive clicks happily but never receive visible focus, or receive it with the indicator clipped by a parent with hidden overflow. Sale badges and sticky bars also cover focused elements at common viewport sizes.

A ten minute audit you can run today

Put the mouse aside and tab from the top of your homepage. Note every stop where you cannot instantly say where focus is. Continue into a collection page, a product page, the cart drawer, and the start of checkout. Write down the exact elements that fail, because vague notes like fix focus rarely survive into a developer ticket.

Then zoom the browser to 200 percent and repeat the product page pass. Focus indicators that were visible at normal size sometimes vanish or clip when layouts reflow. Finally, check focus against your busiest backgrounds, hero images and sale banners, since contrast over photography is where subtle outlines go to die.

Fixing it without a redesign

A strong default fixes most stores. A two to three pixel solid outline with an offset, in a color that contrasts with both your background and your brand accents, applied on focus visible, covers the majority of elements with a few lines of CSS. Offset matters, it keeps the outline clear of the element edge where it can blend into borders.

After the global fix, hand check the custom components the audit flagged. Each may need its own focus rule that matches its shape, such as a ring on a round swatch. Test with a screen reader once as well, not for the visuals, but to confirm that what receives focus also announces something meaningful when it gets there.

Related reading

If this topic is useful, these earlier guides go deeper on connected questions: Icon buttons need names: cart, search, and account done right, Product page accordions and tabs: making detail sections accessible, and Accessible Shopify product videos: captions, transcripts, and controls.

Frequently asked questions

Why do focus outlines disappear on my store?

Usually because a theme or framework reset removed the default outline and nothing replaced it. Search your CSS for outline none or outline zero applied broadly. The fix is to restore a clearly visible style for keyboard focus rather than deleting the rule and hoping.

Should mouse users see focus outlines too?

They do not need to, and the focus visible pseudo class exists to separate the two cases. Keyboard navigation shows the indicator, mouse clicks do not trigger it. This keeps the design clean for pointer users without hiding position from keyboard users.

What makes a focus indicator pass accessibility checks?

It needs enough contrast against adjacent colors and enough thickness or area to be obvious. A solid outline of at least two pixels with clear contrast, visible on every interactive element and not clipped by containers, is a practical target most audits accept.

How does focus visibility affect conversion?

Keyboard users abandon stores they cannot navigate, and invisible focus is the most common reason. It also affects switch device and voice control users. Fixing it keeps shoppers who arrived ready to buy from leaving over a missing outline.