How to fix input button name on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Use the search/filter box to find theme files that contain `<input type="submit"` or `<input type="button"` — common files include `sections/main-cart-footer.liquid`, `snippets/product-form.liquid`, and `templates/customers/login.liquid`.
3. Locate any `<input>` button tag with `value=""` or no `value` attribute and add or update the `value` to a descriptive label (e.g., `value="{{ 'cart.general.checkout' | t }}"`). Use Shopify's translation keys where possible to support multiple languages.
4. Click Save, then preview the theme and use a screen reader or browser accessibility inspector (Chrome DevTools → Accessibility panel) to verify the button name is now 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.