Form fields with no label in WooCommerce

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 WooCommerce

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

In WooCommerce the theme and the plugins both contribute markup. Create a child theme before editing: otherwise the next update overwrites your changes.

As it is

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

As it should be

<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

Does your WooCommerce shop have this failure?

We detect your platform automatically and give you the instructions for it. Free, no sign-up.