label

Form <input /> elements must have labels

Who might be affected
SR
VC

Description

Screen readers rely on form inputs labeling to parse and read their meaning and purpose to the user. When the inputs are not properly labeled, screen readers cannot read them correctly and, as a result, they are inaccessible to users of screen readers and a few other assistive technologies.

Quick Fixes

Label inputs using one of the following techniques:
1 <!-- Use the "<label>" element with the "for" attribute -->
2 <label for="first-name">First name:</label>
3 <input type="text" id="first-name" />
4
5 <!-- Wrap the input with "<label>" element
6 that contains a valid text node -->
7 <label>
8 Last name:
9 <input type="text" />
10 </label>
11
12 <!-- Use the "aria-label" attribute -->
13 <input type="email" aria-label="email address">
14
15 <!-- Use the "aria-labelledby" attribute -->
16 <p id="password-label">Password</p>
17 <input type="password" aria-labelledby="password-label">
18

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A) | 4.1.2 Name, Role, Value (A)

Recommended Reading