Input button name

Quick win

Add a descriptive label to every input button so screen readers can announce what the button does.

What it is

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.

Why it matters

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.

How to fix it

Identify every `<input type="button">`, `<input type="submit">`, and `<input type="reset">` element on your site that has an empty or missing `value` attribute.
Add a short, descriptive `value` attribute that tells the user exactly what the button does (e.g., `value="Add to Cart"`, `value="Search"`, `value="Subscribe"`).
If the button must appear visually unlabelled (e.g., an icon-only button), keep a meaningful `value` and hide it visually using CSS, OR replace the `<input>` with a `<button>` element and add an `aria-label` attribute (e.g., `aria-label="Add to Cart"`).
Alternatively, you can add `aria-label` or `aria-labelledby` directly to the `<input>` element if changing the `value` is not possible — these override the accessible name calculation.
After making changes, re-test with a free screen reader (NVDA + Firefox on Windows, or VoiceOver on Mac/iOS) or re-run your accessibility scanner to confirm the button name is now announced correctly.
Check all page templates (homepage, product pages, cart, checkout, search, contact) because the same button component may appear in many places.

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

Fix it on your platform

Pick your platform for the exact steps.

How to fix input button name on Shopify

In your Shopify admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
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`.
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.
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.

Full Shopify guide →Official Shopify docs ↗

How to fix input button name on WooCommerce

Identify which theme file renders the button. Common locations: `woocommerce/templates/cart/proceed-to-checkout-button.php`, `templates/checkout/form-checkout.php`, or a child theme override.
In your WordPress admin, go to Appearance → Theme File Editor (or use an FTP client / file manager), open your child theme folder, and locate the relevant WooCommerce template file.
Find the `<input type="submit"` or `<input type="button"` tag with an empty `value` and add a descriptive label: e.g., `<input type="submit" value="<?php esc_attr_e('Place Order', 'woocommerce'); ?>"`.
If you cannot safely edit template files, install a plugin like 'Code Snippets' or use your child theme's `functions.php` to hook into the output with `woocommerce_order_button_text` filter to supply the label.
Clear any caching plugin cache and re-test the page with an accessibility scanner or screen reader.

Full WooCommerce guide →Official WooCommerce docs ↗

How to fix input button name on BigCommerce

In your BigCommerce admin, go to Storefront → My Themes → click Customize on the active theme → then Edit Theme Files (or use the Stencil CLI locally).
Search template files (`.html` files in `templates/components/` and `templates/pages/`) for `<input type="submit"` or `<input type="button"` with an empty or missing `value`.
Update the `value` attribute to a meaningful label, using Stencil's translation keys where available (e.g., `value="{{lang 'cart.checkout'}}"`), then save.
Publish the theme update and verify with Chrome DevTools Accessibility panel or a screen reader.

Full BigCommerce guide →Official BigCommerce docs ↗

How to fix input button name on Wix

Open the Wix Editor for your site. Click on the button element that is missing a label.
In the button settings panel, look for the 'Text' or 'Label' field and enter a descriptive button label (e.g., 'Submit', 'Add to Cart'). Wix buttons created with the visual editor use the text content as the accessible name — ensure the text field is not empty.
For Wix forms: go to the form's field settings and ensure the submit button has a non-empty label in the 'Button Text' field.
If you are using Wix Velo (custom code), find the button element in your page code and set its `label` property: e.g., `$w('#myButton').label = 'Subscribe';`.
Publish the site and verify using the Wix Accessibility Wizard (Add-ons → Accessibility Wizard) or a browser screen reader.

Full Wix guide →Official Wix docs ↗

How to fix input button name on Squarespace

In the Squarespace editor, click the button block or form block containing the unlabelled button.
For standard Button blocks: click the block to edit it and ensure the 'Button Text' field has a descriptive label — Squarespace uses this text as the accessible name.
For Form blocks: click the form, then click the Submit button and edit the 'Button Text' field to add a meaningful label (e.g., 'Send Message', 'Subscribe').
For advanced customisation (e.g., a custom code block), go to Pages → a page → add a Code Block, and write your `<input>` with a proper `value` attribute.
If you need to inject a fix across all pages, go to Settings → Advanced → Code Injection and add a JavaScript snippet that finds empty-value input buttons and sets their `value`: e.g., `document.querySelectorAll('input[type="submit"][value=""]').forEach(el => el.value = 'Submit');`.
Save and preview, then test with VoiceOver or a browser accessibility tool.

Full Squarespace guide →Official Squarespace docs ↗

How to fix input button name on Webflow

Open the Webflow Designer. In the Navigator panel, locate the Form Block that contains the submit button.
Click the submit button element (usually a 'Submit Button' component within the Form Block).
In the right-hand Settings panel (the gear icon), find the 'Value' field for the button and enter a descriptive label (e.g., 'Send Message', 'Subscribe', 'Check Out').
If the button was added as a custom HTML Embed, switch to the Embed editor and update the `value` attribute directly in the HTML.
Publish the site and validate with Chrome DevTools → Accessibility tab, or run axe DevTools browser extension to confirm the button now has an accessible name.

Full Webflow guide →Official Webflow docs ↗

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

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/`.
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>/`).
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')) ?>"`.
Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving.
Verify in the browser with an accessibility inspector or screen reader that the button's accessible name is now correctly announced.

Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find input button name — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Input button name?

Why does input button name matter?

How do I fix input button name?