DO NOT USE - USE checkpoint 4.1.2.a: Visible label/form field are not associated

Rule

Labels MUST be programmatically associated with their corresponding elements.

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. In addition, some coding methods will create a larger clickable area for the form element which benefits people with motor disabilities.

How to Fix

Fix this issue by using ONE of the following techniques:

1. Explicit label: Under most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.

<label for="fname">First Name:</label> <input type="text" name="fn" id="fname">

2. Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.

<input type="text" aria-label="search"> <input type="submit" value="Search">

3. Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.

<span id="nickname">Nickname:</span> <input type="text" aria-labelledby="nickname">

4. Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.

<label>First Name: <input type="text" name="fn"></label>