Recommended practice Priority: Serious
Form fields have no visible label
Some form fields are named only by a tooltip (the title attribute), a hidden description or a hidden label, so no label is shown on screen. This is a recommended practice that goes beyond the WCAG 2.2 AA level the accessibility laws rely on.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Shoppers see an empty box and must guess whether it wants a phone number, a postcode or a promo code. A tooltip appears only on mouse hover, never on phones, and a placeholder disappears as soon as someone starts typing. People who use voice control cannot say the name of a field they cannot see.
Who is affected
- people with cognitive or memory difficulties
- older shoppers
- voice control users
- shoppers on smartphones
How to fix it
Give every input, select and textarea a visible <label> linked with for and id, or wrap the field inside the label. Do not use the title attribute, aria-describedby or a visually hidden label as the only name, and do not treat a placeholder as a label. For compact fields such as search or newsletter boxes, keep a short visible label next to the field.
On Shopify
Usually found in newsletter, search or custom contact forms in the theme's sections or snippets, where the label is hidden and only a placeholder shows. Make the label visible in that section's Liquid and CSS; for forms added by apps, ask the app developer.
On Shoptet (CZ)
Depends on the template. Check the template settings or a newer template version; if a label exists but is hidden, custom CSS through Shoptet's custom code options may reveal it. Otherwise ask Shoptet or a partner.
On PrestaShop
Usually in the newsletter, search or contact module templates. Override the module's .tpl file in your theme and show a real label instead of relying on a placeholder or title.
On WooCommerce
Usually comes from the theme, a form plugin or a page builder that hides labels for a minimal look. Turn labels back on in the form plugin's settings, or show them through the child theme's templates or CSS.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule label-title-only.
dequeuniversity.com, github.com, www.w3.org