WCAG A/AA requirement Priority: Critical
Form fields have no label
Some form fields have no label that assistive technology can read, so it is unclear what to type in them.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users hear only "edit text" and do not know whether to enter a name, phone or postcode. In checkout this leads directly to abandoned orders. Placeholder-only fields also confuse older customers once they start typing.
Who is affected
- blind customers
- screen reader users
- older customers
- people with cognitive disabilities
- voice control users
How to fix it
Connect a visible <label for> to each input, or wrap the input in the label. Use aria-label only when a visible label is truly impossible. A placeholder is not a label. Check search, newsletter, quantity and checkout fields.
On Shopify
Checkout is controlled by Shopify, so problems are usually in the theme's search, newsletter, contact or quantity fields, or in forms added by apps. Add labels in the theme's Liquid templates or the app's settings.
On Shoptet (CZ)
Usually search, newsletter or contact fields in the template. Check template settings first; deeper changes to form markup usually need Shoptet or a partner.
On PrestaShop
Check search, newsletter, account and checkout templates in the theme and modules. Add <label> elements in the .tpl files or overridden module templates.
On WooCommerce
Check checkout, account and search forms in the theme and any form or checkout plugins. Add labels in child-theme templates or use plugin options that output real <label> elements.
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 label.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Some links do not say where they go
WCAG 2.4.4 A
-
Buttons and links are too small to tap easily
WCAG 2.5.8 AA
-
Some labels are placed where screen readers ignore them
WCAG 4.1.2 A
-
The page declares two different languages
WCAG 3.1.1 A