Input button name
Quick winFound on 1% of audited stores.
Add a visible label or accessible name to every input button so assistive technologies can announce what the button does.
What it is
An "input button" is any clickable button created with an HTML `<input>` tag of type `button`, `submit`, or `reset`. Its accessible name — the text a screen reader announces when a user focuses on it — comes from its `value` attribute. When that attribute is missing or empty (`value=""`), the button has no accessible name at all. A screen reader user hears something like "button" with no description, giving them no idea what will happen if they press it. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that every interactive element, including buttons, has a programmatically determinable name.
Why it matters
Screen reader users — which include millions of people with visual, motor, or cognitive disabilities — cannot use your site's key actions (Add to Cart, Search, Subscribe, Checkout) if the buttons that trigger them have no accessible name. This is a direct WCAG 2.1 Level A violation, the most fundamental compliance level, and exposes your store to legal risk under ADA Title III (US), EN 301 549 (EU), and equivalent laws worldwide. Beyond legal risk, an unlabelled submit button on a checkout or contact form causes real cart abandonment and lost conversions. Search engines also look at accessibility signals as a proxy for page quality, so fixing these issues can support your overall SEO health.
How to fix it
- Locate every `<input type="button">`, `<input type="submit">`, and `<input type="reset">` element on the page.
- Add a non-empty, descriptive `value` attribute that clearly describes the button's action, for example `value="Add to Cart"` or `value="Submit Order"`.
- If the button must remain visually unlabelled (icon-only), add `aria-label="Descriptive action"` to the input element instead of, or in addition to, a `value` attribute.
- Never set `value=""` (empty string) on a button intended for interaction — this strips the accessible name entirely.
- After making changes, re-test with a screen reader (NVDA + Firefox, or VoiceOver + Safari) and confirm the button's purpose is clearly announced on focus.
- Re-run your automated accessibility scan to verify the `input-button-name` rule no longer flags the element.
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 Actions → Edit code.
- Search across theme files (use the search icon in the file sidebar) for `input type="submit"`, `input type="button"`, or `input type="reset"`.
- Most commonly affected files are `sections/main-cart-footer.liquid`, `sections/header.liquid`, `snippets/product-form.liquid`, and any custom snippet files.
- Find any `<input ... value="">` or `<input ... value>` without text and add a descriptive value, e.g. `value="Add to Cart"`.
- If a button is intentionally icon-only, add `aria-label="Add to Cart"` to the input tag.
- Click Save, then preview the page and test with a screen reader or the axe browser extension.
How to fix input button name on Shopify Plus
- Follow the same steps as Shopify above; Shopify Plus stores also allow checkout customisation via Checkout Extensibility.
- For checkout UI extensions, open your extension code in the Shopify CLI / partner dashboard and locate any `<Button>` or rendered input components and ensure their label or children prop is non-empty.
- For legacy checkout.liquid (if still active), go to Online Store → Themes → Edit code → layout/checkout.liquid and fix any empty-value input buttons there.
How to fix input button name on WooCommerce
- Empty-value input buttons in WooCommerce most often originate in theme template files, not WooCommerce core.
- In your WordPress admin go to Appearance → Theme File Editor (or use a child-theme folder via FTP/SSH).
- Search template files for `<input type="submit"` with an empty or missing value — common locations are `woocommerce/templates/cart/cart.php`, `checkout/form-checkout.php`, and widget templates.
- Edit the relevant template in your child theme (copy from the plugin folder first if not already overridden): add `value="Place Order"` or the appropriate label.
- Alternatively, install the free WP Accessibility plugin and use its button-label helpers, or add a small code snippet to `functions.php` using `woocommerce_order_button_text` filter to ensure submit buttons carry a label.
- Test with the axe DevTools browser extension after saving.
How to fix input button name on BigCommerce
- In your BigCommerce control panel go to Storefront → Themes → click Customize on your active theme, then click Advanced → Edit Theme Files (or use the Stencil CLI locally).
- Search Handlebars template files (`.html` under `templates/`) for `input type="submit"` or `input type="button"` with an empty value attribute.
- Common files: `templates/components/cart/cart.html`, `templates/components/common/header.html`, and `templates/pages/checkout.html`.
- Add a descriptive `value` attribute (e.g. `value="Proceed to Checkout"`) to every flagged element, or add `aria-label="..."` if the button must stay visually bare.
- Push the updated theme and preview on a staging URL before publishing.
How to fix input button name on Wix
- Wix renders most buttons as proprietary components, so empty `value` issues typically come from custom HTML widgets (Add Apps → Wix HTML iframe) or Velo (Dev Mode) custom forms.
- Open the Wix Editor, click on any custom HTML widget or form element that contains the offending button.
- If using a Wix HTML iframe: click Edit Code, locate the `<input>` tag, and add `value="Submit"` (or appropriate label).
- If using Welo Dev Mode: open the relevant page's code panel and locate the button component — set the `label` or `value` property to a descriptive string.
- For native Wix Button elements, ensure the button text field in the panel is not empty — native Wix buttons use inner text, not `value`, but the text must be non-empty.
- Publish and test with the axe browser extension.
How to fix input button name on Squarespace
- Squarespace manages most button markup automatically; empty-value input buttons most often appear inside Code Blocks or custom Form Blocks.
- In the Pages panel, click the page containing the button, then double-click the Code Block or Form Block.
- For a Code Block: find the `<input type="submit">` or `<input type="button">` element and add `value="Subscribe"` (or appropriate label).
- For a Form Block: open Form settings → Storage & Submission → edit the Submit Button label field to ensure it is not blank.
- If you injected HTML via Settings → Advanced → Code Injection, locate it there and add the `value` attribute.
- Save/Publish and verify with the axe browser extension.
How to fix input button name on Webflow
- In the Webflow Designer, select the button or Form Block Submit button on the canvas.
- For a standard Submit Button inside a Form Block: in the right-hand Settings panel find the 'Value' or 'Button Label' field and enter a descriptive label (e.g. 'Submit Order'). This populates the `value` attribute.
- For a standalone Button element (rendered as `<button>`, not `<input>`): double-click the element on the canvas and type a visible label.
- If you used an Embed component with raw HTML containing an `<input type="submit">`, click the Embed component → open the editor and add `value="Submit"` to the tag.
- Publish the site and re-test with the axe browser extension.
How to fix input button name on Adobe Commerce (Magento)
- Empty-value input buttons appear in `.phtml` template files in your custom theme.
- Locate the relevant template under `app/design/frontend/<Vendor>/<theme>/` — common files are `Magento_Checkout/templates/cart/form.phtml` and `Magento_Contact/templates/form.phtml`.
- Search for `<input type="submit"` or `<input type="button"` with `value=""` or no value attribute.
- Add a translatable label: `value="<?= $block->escapeHtmlAttr(__('Place Order')) ?>"` to leverage Magento's i18n system.
- Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after saving, then verify with the axe browser extension.
How to fix input button name on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — template structure and CLI commands are identical.
How to fix input button name on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → open your active theme in FTP or the theme editor.
- Search `.tpl` (Smarty) template files for `<input type="submit"` or `<input type="button"` with an empty `value` attribute.
- Common files: `themes/<your-theme>/templates/checkout/`, `templates/catalog/`, and `templates/contact.tpl`.
- Add a descriptive `value` attribute, e.g. `value="{l s='Add to cart' d='Shop.Theme.Actions'}"` to use PrestaShop's localisation helpers.
- Clear the Smarty cache under Advanced Parameters → Performance → Clear cache, then test.
How to fix input button name on Headless / Custom (I build in code)
- Search your codebase (HTML, JSX, TSX, Vue SFCs) for `<input type="submit"`, `<input type="button"`, and `<input type="reset"`.
- For every match, ensure the `value` prop/attribute is a non-empty, descriptive string.
- For icon-only or dynamically-rendered buttons where a visible label is not desired, add `aria-label="Descriptive action"` to the element.
- Add an automated accessibility test (e.g. jest-axe or Playwright with axe-core) to your CI pipeline to catch regressions.
- Verify in multiple screen readers (NVDA + Firefox on Windows, VoiceOver + Safari on macOS/iOS).
Does your site have this issue?
Run a free SEOLZ scan to find input button name — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Input button name?
An "input button" is any clickable button created with an HTML `<input>` tag of type `button`, `submit`, or `reset`. Its accessible name — the text a screen reader announces when a user focuses on it — comes from its `value` attribute. When that attribute is missing or empty (`value=""`), the button has no accessible name at all. A screen reader user hears something like "button" with no description, giving them no idea what will happen if they press it. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that every interactive element, including buttons, has a programmatically determinable name.
Why does input button name matter?
Screen reader users — which include millions of people with visual, motor, or cognitive disabilities — cannot use your site's key actions (Add to Cart, Search, Subscribe, Checkout) if the buttons that trigger them have no accessible name. This is a direct WCAG 2.1 Level A violation, the most fundamental compliance level, and exposes your store to legal risk under ADA Title III (US), EN 301 549 (EU), and equivalent laws worldwide. Beyond legal risk, an unlabelled submit button on a checkout or contact form causes real cart abandonment and lost conversions. Search engines also look at accessibility signals as a proxy for page quality, so fixing these issues can support your overall SEO health.
How do I fix input button name?
Add a visible label or accessible name to every input button so assistive technologies can announce what the button does.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- Forms tutorial — W3C WAI
- ARIA basics — MDN