require-input-label.md

require-input-label

✅ The extends: 'recommended' property in a configuration file enables this rule.

Users with assistive technology need user-input form elements to have associated labels.

The rule applies to the following HTML tags:

• <input>
• <textarea>
• <select>

The rule also applies to the following ember components:

• <Textarea />
• <Input />
• {{textarea}}
• {{input}}

The label is essential for users. Leaving it out will cause three different WCAG criteria to fail:

• 1.3.1, Info and Relationships
• 3.3.2, Labels or Instructions
• 4.1.2, Name, Role, Value

It is also associated with this 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 is contained by a label element. If it is not, it checks to see if the input 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" />

<textarea />

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.

Configuration

The following values are valid configuration:

• boolean - true to enable / false to disable
• object -- An object with the following keys:
  • labelTags -- An array of component names for that may be used as label replacements (in addition to the HTML label tag)

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