Ensure Every Form Element Has a Label

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Low vision Hearing Mobility

Standards: WCAG 2.2 Level A

Web accessibility requirements state that each form element must have a programmatically associated label element.

Why It Matters

Form labels are required to make forms accessible. Screen reader users require useful form labels to identify form fields.

When form labels are absent, users won’t understand what data they need to enter.

The absence of labels also prevents fields from receiving focus when read by screen readers. The result is that users with impaired motor control cannot benefit from a larger clickable area for the control since clicking the label activates the control.

Fixing the Issue

Developers need to programmatically associate labels with all form controls. The recommended method for most scenarios is to use the label element and a specific association using the for and id attributes.

It’s also important to ensure that all id elements are unique across each page, and that the label text makes sense to someone listening to them with a screen reader.

Form elements that should have labels, include:

Text entry fields, e.g. <input type=”text”>, <input type=”password”> and <textarea>
Radio buttons, <input type=”radio”>
Checkboxes, <input type=”checkbox”>

The only exceptions for this requirement are:

Buttons – buttons are self-labeling
Hidden inputs – Inputs with the type attribute value of hidden (e.g., type=”hidden”). These inputs are hidden and unavailable for user input. They therefore need no label.

Good Code Example

Code example

<label for="firstname">First name:</label> <input type="text" id="firstname"> Copy

The label can also be implicit by wrapping the <label> element around the input:

Code example

<label>First name: <input type="text"></label> Copy

If the input is already labeled visually some other way, such as through a magnifying glass icon on a search submit button, it may be acceptable to use aria-label to create an invisible text label for screen readers to read.

Code example

<input type="text" aria-label="Search"> Copy

An alternative method (sometimes used when adding a <label> tag would break functionality or styles, or when multiple labels apply to the same input), is to use aria-labelledby instead:

Code example

<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">
<!--visual labels may be elsewhere in the content, such as in table headers--><div id="temperature">Temperature:</div><div id="high">High:</div><div id="low">Low:</div><!-- the inputs --><input type="text" aria-labelledby="temperature low"><input type="text" aria-labelledby="temperature high">

Copy

Lastly a placeholder attribute may be used to give text inputs an accessible name. This is not a recommended solution as the visual label (the placeholder text) will be removed once the user enters text into the input, causing them to not know what the input is for.

Code example

<input type="text" placeholder="Search"> Copy

Bad Code Example

Code example

First name: <input type="text" name="fname"> Copy

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library.