# Visible Focus Indicators: The Outline Keyboard Shoppers Navigate By

Source: https://storefronta11y.com/blog/2026-10-24-visible-focus-indicators-storefront.html

Reviewed October 24, 2026


When a store removes the focus outline for looks, keyboard users lose their cursor. What focus indicators do, the standards for them, and styles that satisfy both design and access.

## The cursor nobody designs for

A mouse user always knows where they are: the pointer shows it. A keyboard user navigates by tabbing, and the focus indicator, usually an outline around the element currently selected, is their pointer. It is the only thing that tells them the next enter key press will open the menu, follow the link, or press add to cart.

Many themes remove that outline globally because it looks untidy when it appears after a mouse click. That one line of CSS quietly deletes the navigation system for every keyboard user on the store, including screen reader users, switch device users, and shoppers with motor impairments who cannot use a mouse at all.

## What the standards require

Accessibility standards require a visible focus indicator on interactive elements, and current guidance goes further: the indicator should be obvious, with sufficient contrast against both the element and the background, and enough area that it can be spotted at a glance while moving quickly through a page.

A faint dotted line in a pale grey that the design team can barely see in a review meeting does not meet the spirit of that requirement, even where it technically renders. If your own team squints to find focus during testing, a shopper tabbing at speed through a checkout has no chance of tracking it.

## Styles that designers can live with

The modern solution is the focus visible approach: browsers can show the indicator for keyboard navigation while suppressing it for mouse clicks, which removes the original aesthetic complaint honestly instead of by deleting access. A strong double treatment, a solid outline in a brand color offset from the element, looks deliberate rather than default.

Test focus styles on every background the store uses. An outline that is crisp on white may vanish on the dark footer or over a photo banner. Offset outlines with a contrasting shadow or a dual color ring survive changing backgrounds, which is why they have become the pattern serious design systems standardize on.

## Testing the tab order, not just the outline

A visible indicator only helps if the focus order itself is logical: header, navigation, main content, in reading order, without leaping randomly around the page or falling into hidden menus. Tab through the homepage, a product page, and the full checkout, watching where focus goes and whether it ever disappears into an element you cannot see.

Pay special attention to modals, drawers, and cookie banners, which are the classic focus traps and vanishing points. When a dialog opens, focus should move into it and cycle inside it until it closes. That behavior, plus a visible outline, is what keyboard navigation through a modern storefront actually stands on.

## Related reading

If this topic is useful, these earlier guides go deeper on connected questions: [How to Test Your Checkout With Only a Keyboard](https://storefronta11y.com/blog/2026-10-23-keyboard-only-checkout-test.md), [Accessible Product Videos: Captions, Transcripts, and Controls](https://storefronta11y.com/blog/2026-10-23-accessible-product-videos-captions.md), and [Skip links on Shopify themes: the small tag that saves keyboard users minutes](https://storefronta11y.com/blog/2026-10-22-skip-links-shopify-themes.md).

## Frequently asked questions

### Why do developers remove focus outlines?

Because the default outline can appear after mouse clicks and looks untidy in screenshots and design reviews. The correct fix is the focus visible pattern, which shows the indicator for keyboard users and hides it for mouse users, not removing the outline for everyone.

### What makes a focus indicator compliant?

It must be visible on every interactive element, with enough contrast and size to be found quickly. Current accessibility guidance sets expectations for contrast and area. In practice, a clear offset outline in a strong color against all backgrounds is the reliable pattern.

### How do I check focus on my store?

Put the mouse aside and tab through the homepage, a product page, and checkout. You should always be able to see exactly where you are, move in a sensible order, and operate everything, including menus and dialogs, without focus ever disappearing or getting trapped.

### Does the focus indicator affect regular shoppers?

With focus visible styling, mouse and touch users rarely see it at all. Keyboard users see the essential. That split is why there is no remaining tradeoff between a clean looking store and a navigable one.