axe-core "label" form element has no label in CI

By Kaveh Alemi·Latchkey

axe-core rule label found a form control with no programmatically associated name. WCAG 1.3.1 and 4.1.2 require every input to have a label a screen reader can announce.

What this error means

axe reports "label: Form elements must have labels" for an <input> that has neither a wrapping or for-linked <label>, nor aria-label/aria-labelledby.

label: Form elements must have labels (critical)
  Fix any of the following:
    Form element does not have an implicit (wrapped) <label>
    Form element does not have an explicit <label>
    aria-label attribute does not exist or is empty
  <input type="text" name="email">

Common causes

The input has no associated label element

A placeholder is not a label. Without a wrapping label, a for/id pair, or an aria attribute, the control has no accessible name.

A label id and input id do not match

The <label for="..."> points at an id that is not on the input (or was renamed), so the association is broken and axe still fails.

How to fix it

Associate a label with the input

1. Add a <label> whose htmlFor/for matches the input id, or wrap the input in the label.
2. If no visible label fits, add an aria-label on the input.
3. Re-run axe to confirm the control now has an accessible name.

<label htmlFor="email">Email</label>
<input id="email" type="text" name="email" />

Use aria-label for icon-only or search inputs

When a visible label is not desired, give the input an explicit aria-label so it still exposes a name.

<input type="search" aria-label="Search products" />

How to prevent it

• Pair every input with a label or aria-label as a component rule.
• Avoid relying on placeholder text as the only descriptor.
• Run axe on forms in both empty and filled states.

Frequently asked questions

Related guides

References

• GitHub Actions documentation