Start free

WCAG AA · 2.4.7Checked on paid plansEU · US

You can’t see where keyboard focus is

Is it OK to remove the focus outline?

Short answer

Only if you add something just as clear. Keyboard users must always see where they are (WCAG 2.4.7). Many themes remove the browser’s outline with outline: none, so people pressing Tab get lost.

35%of 162 European shops had this (57)
No. 6most common accessibility issue in the study

Why it matters

A visible focus ring is the keyboard user’s mouse pointer. Without it, they can’t tell which link or button Enter will press, and checkout becomes guesswork.

How to fix it

Shopify

  1. Go to Online Store, Themes, Customize, Theme settings, Custom CSS (in Online Store 2.0 themes).
  2. Add a rule such as :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }.
  3. Then search the theme code (Edit code) for outline: none or outline: 0 and remove it.

WooCommerce

  1. Classic themes: Appearance, Customize, Additional CSS. Block themes: Appearance, Editor, Styles, then the ⋮ menu, Additional CSS.
  2. Add a :focus-visible rule with a clear outline, then check buttons on every background color.
  3. Page builders often add outline: none; look for a “focus” or “accessibility” setting there too.

In the code

  1. Don’t remove the focus outline (outline: none) without a replacement.
  2. Add a clear :focus-visible style, e.g. outline: 3px solid with good contrast.

Automated tools can tell that the look changed, not that the change is easy to see. A one-pixel outline in a pale color passes the check. Judge contrast and thickness by eye.

The standard behind this rule

WCAGW3C, WCAG 2.2 success criterion 2.4.7 Focus Visible (Level AA)WCAGW3C WAI, Understanding 2.4.7 Focus VisibleEUDirective (EU) 2019/882, the European Accessibility ActEUETSI, EN 301 549 V3.2.1 (2021-03), clause 9 covers web contentEUDeque, EN 301 549 v4.1.1 is final (WCAG 2.2 AA)

A plain summary, not legal advice.