Form fields need a visible label

• Rule: axe/label-title-only
• Checks: Form elements should have a visible label
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: content: A fix needs authored text.

Who it affects

• People who control the page by speaking.
• People who use a keyboard or a switch device instead of a mouse.
• People with cognitive, learning or attention disabilities.

How to fix it

The field’s only label is its title

Add a visible <label> connected with for and id. Remove the title unless it adds something the label does not.

<label for="promo">Promotion code</label>
<input type="text" id="promo">

A hint or error linked by aria-describedby stands in for the label

Add a <label> that names the field. The description then adds to the name instead of replacing it.

<label for="dob">Date of birth</label>
<input type="text" id="dob" autocomplete="bday" aria-describedby="dob-hint">
<p id="dob-hint">For example, 03/27/1990.</p>

Fixes that fail

Replacing the title with aria-label

axe counts aria-label as a label and stops reporting, but the label is still invisible: people who do not use a screen reader still see none.

Replacing the title with a placeholder

The report goes away, but the placeholder disappears as soon as people type, leaving them nothing to check their entry against.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.