Skip to content

require-input-label.md

Latest commit

 

History

History
101 lines (69 loc) · 3.87 KB

require-input-label.md

File metadata and controls

101 lines (69 loc) · 3.87 KB
Raw

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:

It is also associated with this common failure:

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