DO NOT USE - USE checkpoint 4.1.2.a: Label in <th> not associated with form control

Link to DO NOT USE - USE checkpoint 4.1.2.a: Label in <th> not associated with form control copied to clipboard

label-header-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.

When a form is laid out using table markup, visually sighted users identify the purpose of the form field through label placement in the table's header cells. The same information is not being communicated to screen reader users as the label in the header cells association is not programmatically discernible. This causes the form field's label association to not be announced to screen reader users.

How to Fix

Fix this issue by using an aria-labelledby attribute on the <input> to reference the label in another cell. The value of the aria-labelledby attribute is the id attribute value of the visible text label.

IMPORTANT: Note that the table headers/labels must be in <span> elements and that it is the <span> element and NOT the <th> element that has the id. If you place the id on the <th> element, some screen readers will not read the labels correctly when you tab through the form elements.