Form fields with no label in Shopify

WCAG 1.3.1, 3.3.2, 4.1.2 (A) · EN 301 549 9.1.3.1, 9.3.3.2, 9.4.1.2

Some form fields have no accessible name: no <label>, no aria-label, no aria-labelledby.

Where to change it in Shopify

Shopify's own checkout fields are already labelled. Check the ones you added: footer newsletter, header search, and any third-party app forms.

Shopify themes are edited under Online Store › Themes. "Edit code" opens the Liquid templates. Many colour and typography settings can be changed without coding, from the theme editor.

<input type="email" name="email">

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

<!-- Or by wrapping -->
<label>Postcode
  <input type="text" name="postcode" autocomplete="postal-code">
</label>

Why it matters

An unlabelled field is announced as "edit text" and nothing more. In a search box that is annoying; in the shipping address at checkout it makes the purchase impossible to complete without guessing.

On other platforms

• Form fields with no label in WooCommerce
• Form fields with no label in PrestaShop