WCAG A/AA requirement Priority: Critical
Some form buttons have no name
Some buttons made with <input type="button">, "submit" or "reset" have no readable text, for example a search or newsletter button that shows only an icon or an empty value.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader and voice control users cannot tell what the button does: search, subscribe, apply a coupon or send the form. They may skip it or press the wrong one, so they cannot find products or finish a step.
Who is affected
- blind customers
- screen reader users
- voice control users
How to fix it
Give every input button a name. The usual way is a meaningful value attribute, such as value="Search" or value="Apply coupon". For icon-style buttons add aria-label, or replace the input with a <button> that contains visible or visually hidden text. Do not leave value empty and do not rely on a background image or the title attribute.
On Shopify
Usually the search or newsletter submit button in the theme, styled as an icon with an empty value, or buttons injected by apps. Add a value or aria-label in the theme's Liquid snippets; ask app developers to fix their own buttons.
On Shoptet (CZ)
Usually in the template's search or newsletter form, or in custom forms. Fix your own code first; for the template, ask Shoptet or a Shoptet partner whether a newer template version labels these buttons.
On PrestaShop
Usually in search, newsletter or voucher modules whose .tpl templates use an icon input with an empty value. Add a value or aria-label in the theme or overridden module templates.
On WooCommerce
Common in search widgets, newsletter forms, coupon fields and form plugins that output <input type="submit" value="">. Set the button text in the widget or plugin settings, or fix the child-theme template; report plugin buttons to the plugin author.
Standards
| Standard | Clause |
|---|---|
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automated check: axe-core rule input-button-name.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Images have no text description
WCAG 1.1.1 A
-
There is no quick way to skip to the main content
WCAG 2.4.1 A
-
Some videos or sounds start playing with audio by themselves
WCAG 1.4.2 A
-
Some table headers do not describe any data
WCAG 1.3.1 A