Aria command name

What it is

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.

Why it matters

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.

How to fix it

1. Identify every element flagged with the aria-command-name failure — these are typically icon-only buttons (cart, search, close, social share), image links, or custom menu items built with ARIA roles but no visible text.
2. For each element, choose the right labelling technique: (a) add visible text inside the element, (b) add an `aria-label` attribute with a short, descriptive action phrase (e.g., `aria-label="Add to cart"`), or (c) add `aria-labelledby` pointing to the `id` of a nearby descriptive element.
3. If the element shows only an icon or SVG, keep the icon visible but add `aria-label` on the element itself and set `aria-hidden="true"` on the icon/SVG so screen readers skip the decorative graphic and read only the label.
4. If the element contains an `<img>`, ensure that image has a meaningful `alt` attribute — this also serves as the accessible name.
5. After editing, use a browser accessibility checker (e.g., axe DevTools browser extension) to re-scan and confirm the rule no longer fires for those elements.
6. Test with a real screen reader (NVDA + Chrome on Windows, or VoiceOver + Safari on macOS/iOS) to verify the announced name makes sense in context.

<!-- 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>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN