Focus Visible: Testing Keyboard Focus Indicators on Shopify Stores

If keyboard shoppers cannot see where they are, they cannot buy. How to test focus indicators on a Shopify store, spot the common failures, and fix them in the theme.

A keyboard shopper moves through your store one Tab press at a time. The only thing that tells them where they are is the focus indicator, usually an outline or underline that appears around the active link, button, or field. When a theme removes that indicator for looks, or makes it so faint that nobody can see it, the store becomes a maze with no map. The shopper is still moving, they just have no idea where they landed. Most agency teams check focus once, on the homepage, in one browser, and call it done. That is not enough.

What a good focus indicator actually looks like

WCAG asks for a focus indicator that is visible and easy to distinguish from the surrounding content. In practice that means three things. First, it appears on every interactive element, not just links in body text. Menus, icon buttons, quantity steppers, swatches, and close buttons all need it. Second, it has real contrast against both the element and the background behind it. A light gray outline on a white header fails even though an outline technically exists. Third, it does not get clipped. Sticky headers, card borders with overflow hidden, and tight line heights routinely cut off the top or side of an outline, leaving a partial ring that is hard to follow.

Color alone is a weak indicator. A button that only changes shade when focused gives keyboard users almost nothing, especially anyone with low vision or a cheap monitor. An outline with offset, a thicker underline, or a background change plus an outline all work better because they change shape as well as color.

How to test it in twenty minutes

Start on the homepage and Tab slowly from the top. Watch the header first: logo, navigation, search, account, and cart icons are where custom themes most often suppress the outline. Then test a product page. Swatches and variant buttons built from divs often receive focus in code but show nothing on screen. Continue into the cart drawer and checkout entry points. Drawers are a classic failure because focus moves inside the drawer while the visible outline stays hidden behind the overlay.

Repeat the pass at a mobile width and with the browser zoomed to 200 percent. Indicators that look fine on a large monitor vanish when elements shrink or wrap. Record each failure with the page, the element, and a screenshot. A screenshot matters because developers often test in a different browser where the default outline behaves differently, and the picture ends the argument about whether a problem exists.

Fixing it in the theme without a redesign

Most fixes are small CSS changes. Remove any global rule that sets outline to none without a replacement. Add a consistent focus-visible style that applies across the theme, using a color that contrasts with your main backgrounds and an offset so the ring sits outside the element. Then handle the exceptions one by one: dark sections need a light outline, light sections need a dark one, and image cards need extra room so the outline is not clipped.

Resist the urge to style focus differently on every component. Consistency is part of usability. When the indicator looks the same everywhere, shoppers learn it once and trust it. When every section invents its own version, people have to relearn the signal on each page, and some versions will inevitably be too subtle to notice.

Make it part of the release check

Focus regressions return whenever a new section, app embed, or promotional banner ships. Add a five minute keyboard pass to the release checklist, focused only on new or changed templates. Keep one page in your QA notes that lists the store's focus style and the approved colors for light and dark backgrounds, so new developers match it instead of improvising. It is unglamorous work, and it is the difference between a store that claims to be accessible and one a keyboard shopper can actually use.

Frequently asked questions

What is focus visible in plain terms?

Focus visible means the browser shows a clear visual marker around the element that currently has keyboard focus. When you Tab through a page, that marker is how you know where the next Enter or Space press will act.

Why do so many Shopify themes have weak focus indicators?

Many themes start from design files that never show a focus state, so developers remove the browser default outline to match the design and never replace it. App embeds add a second problem because each app brings its own styles, or none at all.

Is the browser default outline good enough?

Sometimes. The default outline is usually visible and consistent, and keeping it is far better than removing it. It may still fail on colored backgrounds or get clipped by tight layouts, which is why a short manual test on your own pages matters.

How often should we retest focus indicators?

Test them on every release that changes navigation, product templates, drawers, or banners, and do a full pass at least quarterly. Focus styles are CSS, and CSS changes constantly, so a one time fix will drift.