Form fields with no label

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.

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.

A confusing field at checkout is an abandoned basket. This is not only compliance, it is conversion.

How to fix it

Associate a <label> using the for attribute pointing at the field id, or wrap the field inside the label. A placeholder does not count: it disappears as soon as someone types, and many screen readers never announce it.

<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>

On your platform

• Shopify

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

• WooCommerce

  WooCommerce checkout fields ship with labels; problems usually come from custom-field plugins or themes that hide the label for design reasons.

• PrestaShop

  Check the newsletter and search modules, which often use a placeholder only.

Related

• Image button with no alternative text
• Embedded frame with no title
• The placeholder is doing the label’s job
• Buttons with no name