Reviewed November 7, 2026

Focus Visible: The 2-Pixel Outline Your Theme Keeps Deleting

Press Tab on your storefront and watch where the focus goes. If you cannot see it, your keyboard customers cannot either, and they are navigating your store blind. The focus indicator is the cursor for people who do not use a mouse, and most Shopify themes delete it on purpose.

The deletion is usually one line of CSS, outline: none, applied globally, written by a designer who found the browser default ugly. WCAG 2.2 Success Criterion 2.4.7, Focus Visible, requires a visible indicator at Level AA, and the fix is not to restore the ugly default. It is to design a better one.

What visible means in the criterion

The indicator has to be visible whenever a component has keyboard focus, and it has to be distinguishable from the unfocused state. WCAG 2.2 added Focus Not Obscured, 2.4.11, which requires the focused element not to be hidden behind a sticky header or banner, and Focus Appearance, 2.4.13 at Level AAA, which asks for an indicator at least 2 CSS pixels thick around the element's perimeter.

The browser default, a 2-pixel outline in the browser's accent color, passes. The problem is that themes remove it globally instead of replacing it, so links, buttons, and inputs all go dark. A customer tabbing through a product page cannot tell whether they are on the size selector, the add-to-cart button, or the quantity field, and the first wrong Enter is a wrong purchase or a lost sale.

The fix is a designed focus style, not a restoration. A 2-pixel solid outline in the brand color, offset by 2 pixels so it clears the element edge, with a border-radius that matches the component. It takes one CSS rule, it looks intentional, and it passes. The :focus-visible pseudo-class lets the style appear for keyboard users while staying hidden for mouse clicks, which is the compromise designers actually want.

Where Shopify themes hide the problem

The global reset is the first place to look. Search the theme CSS for outline: none and outline: 0, and check whether each one is paired with a replacement focus style. A reset that removes the outline from every element and replaces it on nothing is the failure, and it is present in more themes than any store owner would guess.

Sticky headers are the second hiding place. A fixed announcement bar or header that overlaps the focused element violates 2.4.11, because the focus indicator is visible in the DOM but covered on screen. Scroll the page, tab to an element under the header, and check whether the outline is actually visible or just technically present.

Custom components are the third. Quantity pickers, variant selectors, and carousel controls built from divs with click handlers often have no focus style at all, because nobody styled the focus state when they built the component. If it is operable by keyboard, it needs a visible focus indicator. If it is not operable by keyboard, that is a different failure.

The test that takes five minutes

Unplug the mouse, load the homepage, and Tab from the top to the checkout button. Every stop should be visible, every stop should be announced sensibly, and no stop should be hidden under the header. Then Shift-Tab back. If you lose track of where you are at any point, so does every keyboard customer, and the fix is a single CSS rule you can ship today.

Frequently asked questions

Why do themes remove the focus outline?

Designers find the browser default ugly, so they remove it with outline: none. The mistake is removing it without adding a designed replacement, which leaves keyboard users with no visible focus at all.

What makes a good focus indicator?

A 2-pixel solid outline in a contrasting color, offset slightly from the element so it clears the edge. The :focus-visible pseudo-class shows it for keyboard users and hides it for mouse clicks.

What is WCAG 2.4.11, Focus Not Obscured?

A WCAG 2.2 Level AA criterion requiring the focused element not to be hidden behind a sticky header or banner. The indicator must be actually visible on screen, not just present in the code.

Do mouse users need to see focus indicators?

No. :focus-visible shows the indicator for keyboard navigation and hides it for mouse clicks, which is the behavior designers want and the behavior the criterion accepts.