Focus not visible
Quick winFound on 4% of audited stores.
Add a clearly visible focus indicator to every interactive element so keyboard users can always see which element is currently selected.
What it is
When someone navigates your store using only a keyboard (Tab, Shift+Tab, arrow keys), their browser highlights the currently focused element — a button, link, form field, etc. — so they know where they are. This is called the "focus indicator" or "focus ring." The problem occurs when a theme or custom CSS removes or hides this highlight (often via `outline: none` or `outline: 0`), making the page look cleaner but leaving keyboard users completely lost. WCAG Success Criterion 2.4.7 (Focus Visible) requires that this focus indicator always be visible.
Why it matters
Roughly 7% of internet users navigate primarily by keyboard — including people with motor disabilities, power users, and anyone whose mouse has stopped working. If they can't see where focus is, they literally cannot use your store: they can't tell which product they're about to add to the cart, which field they're typing in, or which button they're about to press. Beyond lost sales, hiding focus indicators is a WCAG 2.1 Level AA violation, which creates legal exposure under the ADA, the European Accessibility Act, and similar laws in many countries. Accessible stores also tend to rank better because Google uses accessibility signals as a quality indicator.
How to fix it
- Audit your CSS for any rule that sets `outline: none`, `outline: 0`, or `outline: none !important` on interactive elements (a, button, input, select, textarea, [tabindex]). Use browser DevTools or search your stylesheet files.
- Remove or narrow those rules. If the default browser outline clashes with your design, replace it with a custom visible style rather than removing it entirely.
- Write a `:focus` and `:focus-visible` CSS rule that applies to all interactive elements. A high-contrast outline (e.g. 3px solid with good contrast against the background) is the safest choice.
- Test by pressing Tab through every page type (home, product, cart, checkout) and confirming a visible highlight moves with each keypress.
- Check that the focus indicator has a colour-contrast ratio of at least 3:1 against the adjacent background colour (WCAG 2.4.11 for WCAG 2.2 compliance).
- Commit the CSS change to your theme and re-run an automated accessibility scan to confirm the violation is resolved.
Fix it on your platform
Pick your platform for the exact steps.
How to fix focus not visible on Shopify
- In your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- Open Assets → base.css (or theme.css / global.css — whichever is the main stylesheet; search for 'outline' to locate it quickly).
- Find any `outline: none` or `outline: 0` rules on links, buttons, or inputs and either delete them or replace them with your custom focus style.
- At the bottom of the file (or in a dedicated accessibility section), add the universal focus rule from the code snippet below.
- Click Save. Open a preview of your store and press Tab to verify a visible ring appears on every interactive element.
How to fix focus not visible on Shopify Plus
- Follow the same steps as Shopify above; additionally check any custom checkout CSS under Settings → Checkout → Checkout styling and add the same `:focus` / `:focus-visible` rules there if your checkout suppresses the outline.
How to fix focus not visible on WooCommerce
- In WordPress Admin, go to Appearance → Themes → click your active theme → Edit (or use Appearance → Theme File Editor).
- Open style.css (or the child theme's style.css). Search for 'outline: none' or 'outline: 0'.
- Remove or override those rules, then add the universal focus rule from the code snippet below.
- Alternatively, install the Simple Custom CSS plugin and paste the rule there so it survives theme updates.
- Save changes and test by tabbing through the shop, product, cart, and checkout pages.
How to fix focus not visible on BigCommerce
- In your BigCommerce Admin, go to Storefront → My Themes → click Customize on the active theme → click Advanced → Edit Theme Files.
- Open assets/scss/components/base/_base.scss (Cornerstone theme) or the equivalent main CSS/SCSS file. Search for 'outline'.
- Delete or override any `outline: none` rules, then add the focus styles below.
- If you are not on the Stencil framework, go to Storefront → Script Manager and inject a small `<style>` tag with the focus CSS, or add it to the custom footer script.
- Save and preview the theme, then tab through the storefront to verify.
How to fix focus not visible on Wix
- Open the Wix Editor for your site.
- Click the Settings gear → Custom Code (or use the Add → Embed → Custom Code option in the Editor).
- In the Head section, add a `<style>` block containing the universal `:focus` / `:focus-visible` CSS rule from the snippet below. This overrides Wix's default suppression.
- Publish your site and use Tab to test focus visibility across page types.
- Note: Wix's built-in components may still suppress focus in some cases; if so, use the Wix Accessibility Wizard (available in Editor → Tools) for additional guidance.
How to fix focus not visible on Squarespace
- In your Squarespace dashboard, go to Design → Custom CSS (or Website → Pages → Website Tools → Custom CSS).
- Paste the universal `:focus` / `:focus-visible` CSS rule from the snippet below into the Custom CSS editor.
- Click Save. Open your live site, press Tab, and confirm the ring is visible on links, buttons, and form fields.
- If using Squarespace 7.1, also check the Site Styles panel to ensure no individual button or link style is overriding outline to none.
How to fix focus not visible on Webflow
- Open your Webflow Designer and click the Style Manager panel (the paintbrush icon).
- Search for any class that applies `outline: none` to All Links, Buttons, or Inputs — Webflow often does this by default on the base `a` and `button` tags.
- Select the All Links element (or Body, Button, Input as needed) in the Navigator, switch to the Focus state in the Style panel, and set a visible Outline (e.g. 3px solid #005FCC).
- Alternatively, go to Project Settings → Custom Code → Head Code and add a `<style>` block with the universal CSS rule from the snippet below.
- Publish and test by tabbing through the published URL.
How to fix focus not visible on Adobe Commerce (Magento)
- Locate your active theme directory: app/design/frontend/<Vendor>/<theme>/web/css/.
- Open _module.less / _extend.less or the main source/_theme.less file. Search for 'outline'.
- Remove any `outline: none` declarations on interactive selectors, then add the universal `:focus` / `:focus-visible` rule from the snippet below.
- Run `bin/magento setup:static-content:deploy` and clear the cache (`bin/magento cache:flush`).
- Tab through storefront, product, cart, and checkout pages to confirm focus is visible.
How to fix focus not visible on Magento Open Source
- Follow the same steps as Adobe Commerce above. If you are using the default Luma theme, create a child theme override rather than editing vendor files directly.
How to fix focus not visible on PrestaShop
- Navigate to your active theme folder: themes/<your-theme>/assets/css/.
- Open custom.css or theme.css and search for 'outline: none'.
- Remove or override those rules and add the universal focus CSS from the snippet below.
- If you want to avoid editing theme files, go to Back Office → Design → Theme & Logo → Add CSS and inject the rule there.
- Clear the cache (Advanced Parameters → Performance → Clear cache) and tab-test your storefront.
How to fix focus not visible on Headless / Custom (I build in code)
- Search your entire CSS/SCSS/styled-components codebase for `outline: none` or `outline: 0` using your IDE's global search.
- Remove or scope those rules to only apply where absolutely necessary (e.g. when you are providing a fully custom focus style for that element).
- Add the universal :focus / :focus-visible rule in your global stylesheet so it applies site-wide.
- Ensure your design system's component library (button, input, link, modal trigger) all expose a visible focus state.
- Run axe DevTools or Lighthouse in CI to enforce no regression.
Does your site have this issue?
Run a free SEOLZ scan to find focus not visible — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Focus not visible?
When someone navigates your store using only a keyboard (Tab, Shift+Tab, arrow keys), their browser highlights the currently focused element — a button, link, form field, etc. — so they know where they are. This is called the "focus indicator" or "focus ring." The problem occurs when a theme or custom CSS removes or hides this highlight (often via `outline: none` or `outline: 0`), making the page look cleaner but leaving keyboard users completely lost. WCAG Success Criterion 2.4.7 (Focus Visible) requires that this focus indicator always be visible.
Why does focus not visible matter?
Roughly 7% of internet users navigate primarily by keyboard — including people with motor disabilities, power users, and anyone whose mouse has stopped working. If they can't see where focus is, they literally cannot use your store: they can't tell which product they're about to add to the cart, which field they're typing in, or which button they're about to press. Beyond lost sales, hiding focus indicators is a WCAG 2.1 Level AA violation, which creates legal exposure under the ADA, the European Accessibility Act, and similar laws in many countries. Accessible stores also tend to rank better because Google uses accessibility signals as a quality indicator.
How do I fix focus not visible?
Add a clearly visible focus indicator to every interactive element so keyboard users can always see which element is currently selected.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Web accessibility tutorials — W3C WAI