label

Description

All <input> elements in a form should have a <label> element. The go-to method is to associate the <label> with the <input> element using the for and id attributes.

Example

In the following example, none of the three <input> elements have <label> elements associated with them. This makes it tough for screen readers and other assistive technologies to identify what each <input> element represents. Such inaccessible forms break the label rule.

In contrast, the following code snippet has a <label> defined with proper for and id attributes to mark what each <input> element in the form stands for. This makes the form accessible to screen readers and other assistive technologies. Such well-defined forms do not break the label rule.

How to fix?

Check if your site uses form <input> elements without labeling them. If so, you can follow any of the following methods to fix issues:

• Add <label> elements for all <input> elements, using the for and id attributes to clearly associate each <input> element with its label. This is the recommended solution.
• Wrap the <label> around the <input> element instead of using for and id attributes.
• In some cases where the <label element might break functionality, it is acceptable to use the aria-label or aria-labelledby attributes to label the form <input> elements.

Exceptions

• Hidden elements are not available for user input and do not require labels.
• Buttons have an inherent label and don’t require additional labels.

Reference

• WCAG 4.1.2: Name, Role, Value
• WCAG: Associating labels explicitly