Skip to content
StoreA11y

Shopify · 1.3.1 Info and Relationships (Level A)

Form inputs with no label on Shopify

Some form fields have no associated label. A screen reader announces them as "edit text, blank", so the shopper cannot tell which field is the postcode and which is the phone number. On a checkout or contact form this stops the sale outright, and unlabelled form fields are a recurring allegation in filed complaints.

Frequently litigated

Unlabelled checkout and contact fields are pleaded as preventing the plaintiff from completing a purchase.

Which WCAG criterion this fails

  • Does not meet 1.3.1 Info and Relationships (Level A)
  • Does not meet 3.3.2 Labels or Instructions (Level A)
  • Does not meet 4.1.2 Name, Role, Value (Level A)

How to fix it on Shopify

Everything below is done from Online Store > Themes > Edit code. Take a copy of the theme before editing.

  1. Every <input>, <textarea> and <select> needs a <label for="…"> whose `for` matches the input's `id`, and the id must be unique on the page.
  2. A placeholder is not a label. It disappears as soon as the shopper types, and several screen readers ignore it entirely.
  3. If the design has no room for a visible label, keep the <label> element and hide it with the theme's .visually-hidden class — do not delete it.
  4. Newsletter signups, the search field, and the "add a note to your order" box are the usual offenders on a Shopify store.
  5. For a field with a hint, use aria-describedby pointing at the hint element; keep the label separate.

Where this usually lives

sections/newsletter.liquid, sections/main-contact.liquid, snippets/search-form.liquid (or sections/predictive-search.liquid), sections/main-cart-footer.liquid

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

<!-- Visible label -->
<label for="ContactEmail">Email</label>
<input type="email" id="ContactEmail" name="contact[email]" autocomplete="email">

<!-- Label required visually hidden -->
<label for="SiteSearch" class="visually-hidden">Search the store</label>
<input type="search" id="SiteSearch" name="q" placeholder="Search">

<!-- With a hint -->
<label for="Phone">Phone</label>
<input type="tel" id="Phone" aria-describedby="PhoneHint" autocomplete="tel">
<p id="PhoneHint">For delivery questions only.</p>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: label (axe-core).