require-input-label.md

require-input-label

Users with assistive technology need <input> elements to have associated labels. It's so essential for users that failure to provide an associated label for an <input> element will cause failure of three different WCAG success criteria: 1.3.1, Info and Relationships, 3.3.2, Labels or Instructions, and 4.1.2, Name, Role, Value. It is also associated with common failure #68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name.

This rule checks to see if the <input> element is contained by a label element. If it is not, it checks to see if the <input> element has any of these three attributes: id, aria-label, or aria-labelledby. While the id element on the <input> is not a concrete indicator of the presence of an associated <label> element with a for attribute, it is a good indicator that one likely exists.

This rule does not allow an input to use a title attribute for a valid label. This is because implementation by browsers is unreliable and incomplete.

This rule is unable to determine if a valid label is present if ...attributes is used, and must allow it to pass. However, developers are encouraged to write tests to ensure that a valid label is present for each input element present.

Examples

This rule forbids the following:

<div><input /></div>

<input title="some label text" />

This rule allows the following:

<label>Some Label Text<input /></label>

<input id="someId" />

<input aria-label="Label Text Here" />

<input aria-labelledby="someButtonId" />

<input ...attributes />

<input type="hidden" />

Migration

• the recommended fix is to add an associated label element.
• another option is to add an aria-label to the input element.
• wrapping the input element in a label element is also allowed; however this is less flexible for styling purposes, so use with awareness.

References

• Understanding Success Criterion 1.3.1: Info and Relationships
• Understanding Success Criterion 3.3.2: Labels or Instructions
• Understanding Success Criterion 4.1.2: Name, Role, Value
• Using label elements to associate text labels and form controls
• Using aria-labelledby to provide a name for user interface controls
• Using aria-label to provide an invisible label where a visible label cannot be used
• Failure due to a user interface control not having a programmatically determined name
• Failure due to visually formatting a set of phone number fields but not including a text label