Skip to content
StoreA11y

Shopify · 4.1.2 Name, Role, Value (Level A)

Hidden elements can still be focused on Shopify

Some elements are marked aria-hidden="true" but still contain something keyboard-focusable. A sighted keyboard user tabs into a control that a screen reader insists is not there, so focus disappears into an announced-as-empty void. Closed cart drawers and off-screen mobile menus are the classic cause.

Which WCAG criterion this fails

  • Does not meet 4.1.2 Name, Role, Value (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. If a region is hidden, it must not be reachable by Tab. Add the hidden attribute or display:none, which removes it from the tab order properly.
  2. Where the element must stay in the layout (a CSS-transformed off-canvas menu), set inert on the container, or tabindex="-1" on each focusable child while it is closed.
  3. Never put aria-hidden="true" on an element that is visible on screen — that hides real content from screen readers.
  4. In the theme JavaScript that opens and closes the drawer, toggle both the visual class and the hidden/inert state together.
  5. Check the mobile menu at desktop width and the desktop menu at mobile width — one of the two is usually still tabbable.

Where this usually lives

assets/global.js (drawer + menu components), sections/header.liquid, snippets/cart-drawer.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Wrong: hidden from AT, still tabbable -->
<div class="cart-drawer" aria-hidden="true">
  <button>Checkout</button>
</div>

<!-- Right: inert removes it from the tab order too -->
<div class="cart-drawer" aria-hidden="true" inert>
  <button>Checkout</button>
</div>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: medium. Rule id: aria-hidden-focus (axe-core).