label-orphaned

Ensures that the <label> element corresponds to a form control

Description

A <label> is orphan if it is not associated with a form control in the HTML code. <label> has a for attribute, and form controls have an id attribute. If the value of the ‘for’ attribute of a <label> equals the ID of a form control, then the two correspond.

Why is it important?

If a <label> does not correspond to a form control, it can confuse assistive technology like screen readers and can have a negative impact on the overall user experience.

Example

Here’s an orphaned label:

Here’s the corrected code:

How to fix?

Link the <label> to the relevant form control using its ID. Or, if the <label> is unintended, remove it.

Reference

• G131: Providing descriptive labels