WCAG A/AA requirement Priority: Critical
Custom input fields have no label
Some custom-built input fields, such as a search box or a country picker, have no name that assistive technology can read.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users do not know what the field is for, so they may be unable to search for a product or fill in an address.
Who is affected
- blind customers
- screen reader users
- voice control users
How to fix it
Give every element with an input role (combobox, textbox, searchbox, listbox, slider, spinbutton) a name via aria-labelledby pointing to visible text, or aria-label. Better still, use native <input> or <select> with a <label>.
On Shopify
Usually predictive search, filters or app widgets. Fix labels in the theme's Liquid and JavaScript; report app widgets to the developer.
On Shoptet (CZ)
Usually search or filter components in the template. Report it to Shoptet or a partner.
On PrestaShop
Usually search or filter modules. Add labels in the overridden module templates or report it to the module developer.
On WooCommerce
Usually search, filter or address-autocomplete plugins. Use plugin settings or child-theme code to add labels, or report it 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 aria-input-field-name.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
A dropdown has no label
WCAG 4.1.2 A
-
Visitors cannot zoom the page on mobile
WCAG 1.4.4 AA
-
An image button has no text description
WCAG 1.1.1 A
-
A list is built incorrectly
WCAG 1.3.1 A