How to fix input button name on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the relevant `.phtml` template file. Common locations: `app/design/frontend/<Vendor>/<Theme>/Magento_Checkout/templates/`, `Magento_Catalog/templates/product/view/`, or `Magento_Customer/templates/`.
2. Create a child theme override if one does not already exist so you do not edit core files (place overrides under `app/design/frontend/<Vendor>/<Theme>/`).
3. Open the template file, find the `<input type="submit"` or `<input type="button"` tag with an empty `value`, and add a descriptive label using the translation helper: e.g., `value="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>"`.
4. Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving.
5. Verify in the browser with an accessibility inspector or screen reader that the button's accessible name is now correctly announced.

<!-- ❌ BEFORE: empty value — screen readers say nothing useful -->
<input type="submit" value="">

<!-- ✅ AFTER option 1: descriptive value attribute -->
<input type="submit" value="Add to Cart">

<!-- ✅ AFTER option 2: aria-label when value must stay empty -->
<input type="submit" value="" aria-label="Add to Cart">

<!-- ✅ AFTER option 3: switch to <button> for more flexibility -->
<button type="submit" aria-label="Add to Cart">
  <svg aria-hidden="true"><!-- cart icon --></svg>
</button>

What is input button name?

An "input button" is any clickable button on your website created with HTML's `<input type="button">`, `<input type="submit">`, or `<input type="reset">` tags. The button's visible (or accessible) label comes from its `value` attribute — for example, `value="Add to Cart"`. When that `value` attribute is missing or left empty (`value=""`), the button has no name that a screen reader can read aloud. This violates WCAG Success Criterion 4.1.2 (Name, Role, Value), which requires every interactive element to have an accessible name.

Screen reader users — including many people with visual impairments — rely on the button's accessible name to understand what will happen when they activate it. A button with no name is announced as something like "button" with no context, making your checkout, search, newsletter sign-up, or contact forms unusable for those shoppers. Beyond the direct accessibility barrier, this is a legal compliance risk: WCAG 2.1 AA is referenced by laws like the ADA (US), EN 301 549 (EU), and the Equality Act (UK), and empty button names are a clear, easily documented violation. Fixing this also improves your overall site quality signals and reduces the risk of accessibility-related complaints or litigation.

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