Skip to main content

label

Severity: Critical

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.

Incorrect sample - no label
Copy icon Copy snippet

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.

Correct sample with label
Copy icon Copy snippet

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy