How to fix button name on Magento Open Source

Steps for Magento Open Source

1. Follow the same steps as Adobe Commerce above — template paths and cache-clearing commands are identical for Magento Open Source.

<!-- ✅ Option 1: Visible text (best) -->
<button type="button">Add to cart</button>

<!-- ✅ Option 2: aria-label on an icon-only button -->
<button type="button" aria-label="Open search">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- ✅ Option 3: Visually-hidden span (text in DOM, hidden visually) -->
<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>
<button type="button">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Open cart</span>
</button>

<!-- ❌ Broken: icon font with no label -->
<button type="button"><i class="icon-cart"></i></button>

What is button name?

Every button on your store — including icon-only buttons like a cart icon, search magnifying glass, hamburger menu, or social share button — must have a text name that screen readers can read aloud. When a button contains only an image or an icon font (e.g. a heart symbol or an arrow), there is no visible text for assistive technology to announce, so blind and low-vision users hear something useless like "button" with no description. WCAG Success Criterion 4.1.2 requires all interactive controls to have an accessible name. This name can be visible text inside the button, an `aria-label` attribute, an `aria-labelledby` reference, or a visually-hidden text element — the screen reader just needs something meaningful to say.

Roughly 7–8% of online shoppers use assistive technology, and an unnamed button is a complete dead-end for them — they cannot add to cart, open the menu, or complete checkout if those buttons have no accessible name. Beyond lost conversions, this is a WCAG 2.1 Level A violation (the lowest, most-required level), meaning it exposes your store to legal complaints and ADA/Section 508 accessibility lawsuits, which have been rising sharply in ecommerce. Google's crawlers also parse ARIA labels and button text as page signals; cleaner, descriptive buttons contribute to better crawlability and can positively influence rankings. Fixing unnamed buttons is typically a quick, high-impact change that simultaneously removes legal risk, improves conversion for disabled users, and makes your site more professional.

See the complete Button name guide for every platform and the full background.