How to fix aria command name on WooCommerce
Add a discernible, screen-reader-accessible name to every button, link, and menuitem that uses an ARIA command role so assistive technology can announce what it does.
Steps for WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme / local editor).
- Locate the template file that renders the unlabelled element — common culprits are header.php, functions.php template parts, or WooCommerce template overrides in woocommerce/templates/.
- Add `aria-label="Descriptive action"` to the offending `<button>` or `<a>` tag. For SVG icons, add `aria-hidden="true"` to the SVG and a visually-hidden `<span class="screen-reader-text">Label</span>` inside the button (WordPress core ships with the .screen-reader-text CSS class).
- Alternatively, install the free 'WP Accessibility' plugin which can patch common missing labels without touching code.
- Save changes and verify with the axe browser extension on the front end.
<!-- BEFORE: icon-only button with no accessible name -->
<button role="button">
<svg aria-hidden="true" focusable="false">...</svg>
</button>
<!-- AFTER option 1: aria-label on the button -->
<button aria-label="Add to cart">
<svg aria-hidden="true" focusable="false">...</svg>
</button>
<!-- AFTER option 2: visually-hidden text inside the button -->
<button>
<svg aria-hidden="true" focusable="false">...</svg>
<span class="sr-only">Add to cart</span>
</button>
<!-- CSS for .sr-only (visually hidden but readable by screen readers) -->
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
</style>What is aria command name?
Every interactive element on your site that acts as a button, link, or menu item must have a text label that screen readers can announce to the user. When these elements use ARIA roles (like `role="button"`, `role="link"`, or `role="menuitem"`) but have no visible text, no `aria-label`, and no `aria-labelledby` pointing to descriptive text, screen readers have nothing to say — so blind and low-vision shoppers hear only "button" or "link" with no context. The WCAG 4.1.2 criterion (Name, Role, Value) requires that all user interface components have a programmatically determinable name. An "aria-command-name" failure means one or more of these elements on your store is completely unlabelled for assistive technology.
Screen reader users — a significant and legally protected segment of online shoppers — cannot understand or activate unlabelled controls, directly costing you sales and causing cart abandonment. In many jurisdictions (including the US under the ADA and the EU under the European Accessibility Act), inaccessible e-commerce sites expose store owners to lawsuits, regulatory fines, and reputational damage. Beyond legal risk, Google's algorithms increasingly factor in accessibility signals, and a better-structured, labelled site typically earns stronger crawlability and engagement metrics. Fixing this issue removes a hard blocker for disabled shoppers and demonstrates your commitment to an inclusive customer experience.
See the complete Aria command name guide for every platform and the full background.
Not sure if your WooCommerce store has this?
Run a free SEOLZ audit — we’ll find aria command name and every other issue across your whole site.
Scan my site free