How to fix label title only on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the .phtml template responsible for the input: common locations are Magento_Search/templates/form.mini.phtml (search), Magento_Checkout/templates/cart/item/renderer.phtml (quantity), Magento_Customer/templates/form/login.phtml (login).
2. In your custom theme (app/design/frontend/<Vendor>/<theme>/), copy the template file from the module's view/frontend/templates/ path, maintaining the same directory structure.
3. Open the copied file and add or fix the <label for='input-id'> element so it matches the input's id attribute. Use the $block->escapeHtml() helper for any dynamic label text.
4. For the mini search form, the input typically has id='search' — ensure a <label for='search' class='label'><span>Search</span></label> precedes it; add the CSS class 'label' to style it visibly or hide it accessibly using Magento's built-in .visually-hidden / .hidden class.
5. Run bin/magento setup:static-content:deploy and bin/magento cache:flush, then hard-refresh the storefront and test with axe.

What is label title only?

Every input field on a web form — search boxes, email fields, quantity selectors, checkout fields — needs a visible label that sighted users can read and that assistive technologies like screen readers can announce. The `title` attribute (which appears as a browser tooltip on hover) and `aria-describedby` (which provides supplementary description) are not substitutes for a proper label. When a field relies only on these mechanisms, many users — including those using screen readers, voice-control software, or who simply have low vision — cannot tell what the field is for. This WCAG rule (label-title-only) flags any form field that lacks a proper visible label and depends solely on hidden or supplementary labeling methods.

Accessibility failures on checkout and search forms directly reduce conversions: if a customer cannot understand what to type into a field, they abandon the form. Legally, WCAG 2.1 Level AA compliance is required or strongly recommended in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada), and failing it exposes your store to complaints, audits, and litigation. Search engines also parse form labels to understand page content and site usability — a well-labeled search or newsletter form sends better signals than one Google's crawler cannot interpret. Fixing this issue improves usability for everyone, including mobile users who cannot hover to see tooltip text.

See the complete Label title only guide for every platform and the full background.