How to fix aria required attr on WooCommerce

Add all required ARIA attributes (such as aria-expanded and aria-controls) to every interactive element that uses an ARIA role, so assistive technologies can communicate widget state to users.

Steps for WooCommerce

  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
  2. Locate the template file for the affected component — e.g. header.php, functions.php-registered navigation menus, or a block template in /templates/.
  3. Add aria-expanded='false' and aria-controls='[target-id]' to the relevant HTML element in the template.
  4. If the toggle behaviour comes from a plugin (e.g. a mega-menu or accordion plugin), check the plugin's settings panel for built-in ARIA options first; if none exist, enqueue a small custom JS file via functions.php that patches the attribute on page load and toggle.
  5. Alternatively, install the 'WP Accessibility' plugin (by Joe Dolson), which patches common ARIA issues in nav menus automatically.
  6. Test with the axe DevTools browser extension.
Official WooCommerce documentation ↗

What is aria required attr?

ARIA (Accessible Rich Internet Applications) roles tell screen readers and other assistive technologies what kind of widget an element is — for example, a button that opens a dropdown, a tab panel, or an accordion. Each ARIA role has a defined set of required attributes that must also be present for the widget to make sense. For instance, a button that expands a menu must include `aria-expanded` (so the screen reader can announce "expanded" or "collapsed") and typically `aria-controls` (so it points to the element it controls). When those required attributes are missing, the role declaration is incomplete and the assistive technology cannot convey the correct state or relationship to the user.

Screen reader users — who often navigate by keyboard only — rely entirely on ARIA state attributes to know whether a menu is open, a tab is selected, or an accordion panel is visible. Without `aria-expanded`, a screen reader user has no way to know whether a dropdown they just activated is open or closed. Without `aria-controls`, they may not find the content that just appeared. This directly breaks the shopping experience for blind and low-vision customers. WCAG 2.x Success Criterion 4.1.2 (Name, Role, Value) is a Level AA requirement, meaning it is referenced in most accessibility laws worldwide (ADA, Section 508, EN 301 549, AODA). Failing it exposes your store to legal complaints and demand letters. It also signals to Google's quality systems that the site has usability issues, which can indirectly affect organic rankings.

See the complete Aria required attr guide for every platform and the full background.

Not sure if your WooCommerce store has this?

Run a free SEOLZ scan — we’ll find aria required attr and every other issue across your whole site.

Scan my site free

Fix aria required attr on another platform