Using the aria-label and aria-labelledby attribute on Table-Forms

Note: In the 2021 WebAIM Million analysis: Home pages averaged 7.6 aria-label or aria-labelledby attributes (an increase from 5.6 in 2020). 1 out of every 15 aria-labelledby and aria-describedby attributes had broken references (meaning the element referenced by the ARIA attribute did not exist on the page).

Sometimes you don't have space on the screen to put a label, or that label would interfere with the design. Or, you might need to put two or more labels on a single control.

The Form (ARIA)

Labrador Retriever Black uses title (t),
Cocker Spaniel Black uses aria-label (al),
Labrador Retriever Yellow uses aria-labelledby (alb),
Cocker Spaniel Yellow uses nothing.

Color Labrador Retriever Cocker Spaniel
Black t al
Yellow alb


<form class="example" action="demo">
<table role="presentation">
<th id="lab">Labrador Retriever </th>
<th>Cocker Spaniel </th>
<td><input size="20" title="Labrador Retriever Black" type="text" /></td>
<td><input size="20" aria-label="Cocker Spaniel Black" type="text" /></td>
<th id="yellow">Yellow</th>

<td><input size="20" aria-labelledby="lab yellow" type="text" /></td>
<td><input size="20" type="text"/></td>