outline: none in Shopify CSS — The Accessibility Bug That's Everywhere
outline: none appears in virtually every Shopify theme CSS file. It is the most copied accessibility antipattern in web development. Added by designers who dislike the default blue outline on clicked elements, it removes the focus indicator for keyboard users entirely — making every interactive element on the page invisible to anyone navigating with a keyboard or other assistive technology. It violates WCAG 2.4.11 (Focus Appearance) and is one of the most common automatic Shopify Theme Store rejection criteria. The fix is two lines of CSS.
What outline: none actually removes
The focus outline is the browser's default visual indicator showing which element is currently focused. For keyboard users — people with motor disabilities, power users, and anyone who cannot use a mouse — this indicator is the only way to know where they are on the page. Removing it with outline: none means: a keyboard user cannot see which button they are about to activate, which link they are about to follow, or which form field is active. The page becomes functionally unusable for keyboard navigation.
The correct replacement: :focus-visible
The :focus-visible pseudo-class applies styles only when the browser determines the focus indicator is useful to the user. For mouse users who click a button, :focus-visible typically does not apply (the browser knows they do not need a visual indicator). For keyboard users pressing Tab, :focus-visible always applies. The correct CSS: *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }. The first rule removes the outline for mouse clicks; the second adds a styled outline for keyboard navigation.
Designing a visible, on-brand focus indicator
WCAG 2.4.11 requires the focus indicator to have a perimeter of at least the CSS perimeter of the component, a minimum contrast of 3:1 between focused and unfocused states, and an area of at least 1 CSS pixel in all directions. A simple compliant implementation: *:focus-visible { outline: 3px solid #005FCC; outline-offset: 3px; }. For a more branded look, match your accent color: use a color that achieves 3:1 contrast against both the component's unfocused background and the page background. Offset the outline from the element using outline-offset to prevent it from merging with the element's border.
Auditing your theme for outline: none
Search your theme's CSS files for: outline: none, outline: 0, outline:none, outline:0. Check every occurrence — some may be appropriate (inside :focus-visible blocks where you are replacing with a custom style). Any occurrence in a :focus, :active, or a, button, input rule without a corresponding :focus-visible custom style is a bug. Also check for -webkit-tap-highlight-color: transparent — this removes the tap highlight on mobile, which may also affect accessibility on touch devices.
The fix: before and after
// CODE_COMPARISON
Frequently asked questions
- Does :focus-visible work in all browsers?
:focus-visible is supported in Chrome 86+, Firefox 85+, Safari 15.4+, and Edge 86+. For older browsers (mainly pre-2021 Safari), :focus-visible is not supported and the rule is ignored — focus indicators will still appear via the :focus fallback. As of 2025, :focus-visible is safe to use as the primary focus styling approach, as it covers all browsers used by more than 0.1% of web users.
- What contrast ratio does WCAG require for focus indicators?
WCAG 2.4.11 (Focus Appearance, level AA) requires a contrast ratio of at least 3:1 between the focused and unfocused states of the component. The outline color must achieve 3:1 contrast against the component's background. For example, a blue outline (#005FCC) on a white background (#FFFFFF) achieves approximately 5.9:1 contrast — well above the 3:1 requirement. Use the WebAIM Contrast Checker to verify your focus color choices.
- Is -webkit-tap-highlight-color: transparent also a problem?
-webkit-tap-highlight-color: transparent removes the tap highlight on iOS Safari when users touch interactive elements. For touch users (not keyboard users), this is generally acceptable — the tap highlight is an old iOS pattern that modern themes replace with CSS :active states. However, if you use this property, ensure you have a visible :active style as an alternative feedback mechanism for touch interactions.
// SCAN_YOUR_CODE
Does your theme have this bug?
Paste your code. Syphio automatically detects and fixes this error and hundreds of others — in seconds.
Validate my Liquid →