How to fix button name on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. In your custom theme directory (app/design/frontend/<Vendor>/<theme>/), locate the relevant .phtml template — common files: Magento_Checkout/templates/cart/minicart.phtml, Magento_Search/templates/form.mini.phtml, Magento_Catalog/templates/product/view/addtocart.phtml.
2. Find the <button> element and add aria-label="Descriptive name" as an HTML attribute, or insert a <span class="amasty-sr-only"> / <span class="action"> element with visually-hidden CSS.
3. If using UI Components or Knockout.js templates (*.html in web/template/ directories), add the aria-label binding: <button ... attr="aria-label: 'Open cart'">.
4. Run bin/magento cache:clean after saving template changes, then verify with axe DevTools in the browser.

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