How to fix label on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Create or edit a template override in your custom theme directory (app/design/frontend/Vendor/theme/).
2. Locate the relevant .phtml template — e.g., Magento_Customer/templates/form/login.phtml, Magento_Checkout/templates/form/field.phtml.
3. Add <label for="INPUT_ID"> markup above unlabeled inputs; use the class 'sr-only' (visually hidden via CSS) if design requires hiding the label visually while keeping it accessible.
4. Run bin/magento setup:static-content:deploy and clear the cache (bin/magento cache:flush) after saving template changes.
5. Audit all custom module forms and third-party extension templates for the same issue, then verify with axe DevTools.

<label for="customer-email">Email address</label>
<input id="customer-email" type="email" name="email" autocomplete="email">

<!-- OR, when a visible label is not possible: -->
<input type="search" aria-label="Search products" name="q">

What is label?

Every form field on your website — such as a search box, email signup, checkout address field, or contact form — needs a label that clearly describes what information belongs there. A "label" is either a visible text description linked to the input, or a special code attribute (like `aria-label`) that screen readers can announce. When a form field has no label at all, assistive technology users hear something unhelpful like "edit text" with no context about what to type. WCAG Success Criterion 4.1.2 requires all interactive elements, including form inputs, to have a name that can be determined programmatically.

Unlabeled form fields directly block customers who use screen readers, voice-control software (like Dragon NaturallySpeaking), or keyboard-only navigation — they simply cannot use your checkout, contact, or signup forms. This is a recognized WCAG 2.1 Level A failure, meaning it is among the most serious accessibility violations and creates real legal exposure under the ADA (US), AODA (Canada), EAA (EU), and similar laws — several major retailers have faced lawsuits citing exactly this issue. Beyond legal risk, it also damages conversions: any customer who cannot complete a form cannot buy from you. Additionally, Google uses accessibility signals as part of its overall quality assessment, so fixing these issues supports your SEO health too.

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