How to fix aria hidden focus on Shopify

Steps for Shopify

1. From your Shopify admin go to Online Store → Themes → click the '…' menu next to your active theme → Edit code.
2. The most common sources of this issue in Shopify themes are: off-canvas mobile menus (typically sections/header.liquid or snippets/header-drawer.liquid), announcement bars, cookie consent apps, and product image carousels.
3. In the theme code editor, search (Ctrl+F / Cmd+F in the editor) for 'aria-hidden' to find every occurrence.
4. For each match, check whether the element also contains <a>, <button>, or <input> tags. If it does, either: (A) remove aria-hidden='true' from the container, or (B) add tabindex='-1' to every focusable child inside it when that section is hidden.
5. For drawer/off-canvas menus, the pattern should be: when drawer is closed → aria-hidden='true' on the drawer + tabindex='-1' on inner links; when drawer opens → aria-hidden='false' (or remove attribute) + remove tabindex='-1'. This is often controlled in assets/theme.js or assets/global.js — look for the function that toggles the drawer open/closed.
6. Save changes, preview the theme, and re-run an axe or Lighthouse accessibility scan on the live preview URL to confirm the issue is resolved.

What is aria hidden focus?

The `aria-hidden="true"` attribute tells screen readers to completely ignore an element and everything inside it — as if it doesn't exist. The problem arises when a focusable element (a button, link, or form field) lives inside that hidden container. Keyboard users can still tab into it, but screen-reader users hear nothing because the element has been silenced. This creates a "ghost focus" trap: the keyboard cursor lands on something invisible to assistive technology with no announcement, no label, and no way to understand what it does. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all interactive UI components expose their name and role to assistive technology.

Screen-reader users — who are often blind or have low vision — can get stuck on focusable elements that their software cannot describe, making parts of your store completely unusable for them. This is a direct WCAG 2.1 Level A violation, the most severe tier, meaning it fails the baseline legal accessibility standard referenced in regulations like the ADA (US), EN 301 549 (EU), and the European Accessibility Act. Beyond legal risk, stores with accessibility barriers lose customers: roughly 1 in 4 adults has some disability, and inaccessible checkout flows directly reduce conversions. Automated accessibility tools (axe, Lighthouse, WAVE) flag this as a critical failure, which can surface in legal demand letters and audits.

See the complete Aria hidden focus guide for every platform and the full background.