DO NOT USE - USE checkpoint 4.1.2.a: Form field has multiple <label> elements associated

Rule

When multiple labels are used for one element, each label MUST be programmatically associated with the corresponding element. A <label> and a form element must have a one-to-one relationship.

Background

People who are blind cannot use the visual layout of a form to determine which labels go with which form elements. In order to be certain which label goes with which form element, the label and form element must be programmatically associated. When labels and form elements are programmatically associated, a screen reader user can put focus on a form element and the screen reader will automatically read the label and element type together.

How to Fix

While HTML5 allows a single form element to be referenced by more than one <label> element via the for attribute, this technique is not well supported by screen readers. As a result, most screen reader users will only hear one label.

Fix this issue by using an aria-labelledby attribute on the input to reference multiple visible labels. The value of the aria-labelledby attribute is a space-separated list of the id attribute values of each visible text label.

<label id="label1">Cat</label><input type="text" aria-labelledby="label1 label2" name="cat"><br> <label id="label2">Enter your cat's name followed by your last name</label>