By default, WooCommerce generates correct labels on every checkout field. So the problem almost never comes from WooCommerce itself, but from the theme: around 60% of commercial themes hide these labels with `label { display: none; }` to save space — creating an RGAA 11.1 non-conformity without anyone noticing.

Diagnosis in 30 seconds

Open the checkout, right-click a field, "Inspect". If you do see a `<label>` tag in the DOM but no text appears on screen above the field, the theme is hiding it in CSS. That's the most common cause — and the simplest to fix.

Why display:none is the wrong reflex

A theme that does `label { display: none }` removes the label from the flow AND from the accessibility tree: the screen reader no longer announces it either. The placeholder alone doesn't replace it, since it disappears on typing. Result: a "Postcode" field becomes anonymous as soon as you start typing.

Minimal CSS fix

/* Re-show the labels the theme hides */
.woocommerce-checkout label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
  display: block !important;
  font-weight: 500;
  margin-bottom: 4px;
}

Place it in Appearance → Customize → Additional CSS, or in a child theme's stylesheet. No plugin required. Reload the checkout: the labels reappear above each field.

⚠ Don't confuse this with sr-only

Visually hiding a label while keeping it in the accessibility tree (class `screen-reader-text`) is technically allowed. But it's a bad design choice when the placeholder is confusing: prefer a visible label. `display: none` and `visibility: hidden`, on the other hand, break accessibility — avoid them for labels.

The other fields that cause problems

  • →Payment gateways (Stripe, PayPal): their fields are in an iframe, not fixable from the theme — check and report to the vendor if needed
  • →The "I have read and accept the terms" checkbox: must be a real clickable label tied to the box
  • →The header search field: often unlabeled, to be doubled with an `aria-label`
  • →Quantity selector: the + and - buttons must have an accessible name

Frequently asked questions

Does an accessibility plugin fix this?

No, avoid overlays: they add a layer over the problem without solving it, and expose you to extra legal risk. The fix here is a few lines of CSS — no plugin needed.

Should I modify the parent theme?

Never directly: use a child theme or the customizer's additional CSS, otherwise your fix vanishes at the theme's next update.

How can I be sure no unlabeled field remains?

Inspect every field in the funnel, or run an automated audit that detects fields without an accessible name across the whole checkout at once.

Detect every unlabeled field on your WooCommerce checkout:

→ Run an audit