Skip to content

template-require-input-label.md

Latest commit

 

History

History
128 lines (96 loc) · 4.15 KB

template-require-input-label.md

File metadata and controls

128 lines (96 loc) · 4.15 KB

ember/template-require-input-label

💼 This rule is enabled in the 📋 template-lint-migration config.

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:

<template>
  <div><input /></div>
</template>
<template>
  <input title="some label text" />
</template>
<template>
  <textarea />
</template>

This rule allows the following:

<template>
  <label>Some Label Text<input /></label>
</template>
<template>
  <input id="someId" />
</template>
<template>
  <input aria-label="Label Text Here" />
</template>
<template>
  <input aria-labelledby="someButtonId" />
</template>
<template>
  <input ...attributes />
</template>
<template>
  <input type="hidden" />
</template>

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

  • 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