Form table association (form-table-association)

Form controls in data tables include row/column headers in their accessible name.


Controls lack row/column context:

The radio buttons have no programmatic association to the column or row headers. As users tab through the controls, assistive technologies won't announce which question (row) and which choice (column) each radio belongs to.


Team Survey
Agree Undecided Disagree
Our goals are clear
We have the tools we need
Deadlines are reasonable

The (DOM/programmatic) structure of one row looks like this:

<tr>
  <th scope="row">Our goals are clear</th>
  <td><input type="radio" name="q1" /></td>
  <td><input type="radio" name="q1" /></td>
  <td><input type="radio" name="q1" /></td>
</tr>

Note: Possible to automatically test. Tools can detect form controls inside data tables and check if their accessible names include or reference row/column headers. A human or AI is still required to confirm if the exposed header text is sufficient and meaningful.

axe detected: none  |  QualWeb detected: 1.3.1