How to fix aria hidden focus on WooCommerce

Steps for WooCommerce

1. The aria-hidden issue usually originates in your WordPress theme or a plugin (slider, mega-menu, cookie banner, or page builder). Start by identifying the source: run axe DevTools in Chrome and note the HTML element flagged.
2. If the issue is in your theme: go to Appearance → Theme File Editor (or use a child theme) and locate the template file rendering the offending element (commonly header.php, functions.php, or a template-parts/ file).
3. If the issue is in a plugin (e.g., a slider or off-canvas menu plugin), check the plugin's settings panel for an 'Accessibility' or 'ARIA' toggle first. If none exists, use a child theme's functions.php to enqueue a small JavaScript fix (see code snippet below).
4. Apply the fix in JavaScript: when a panel/drawer is hidden, set aria-hidden='true' on the container AND loop through its focusable children to set tabindex='-1'; reverse on open. Add this script to your child theme's js/ folder and enqueue it in functions.php with wp_enqueue_script().
5. Install the 'WP Accessibility' plugin (by Joe Dolson) as a complement — it patches several common ARIA mistakes in popular themes automatically.
6. Re-run Lighthouse or axe in Chrome DevTools on your storefront to confirm the violation is gone.

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.