See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
HTML and XHTML.
This failure relates to:
This failure occurs when data tables do not use header elements (th
) or other appropriate table mark-up (the scope
attribute, headers
and id
or the ARIA roles columnheader
/ rowheader
) to make the headers programatically determinable from within table content. Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.
This table does not use th
(or other appropriate header markup) for headers. Instead, it uses td
elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
Example Code:
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Height (cm)</td>
<td>Weight (kg)</td>
</tr>
<tr>
<td>Linda</td>
<td>33</td>
<td>169</td>
<td>59</td>
</tr>
<tr>
<td>Jack</td>
<td>37</td>
<td>184</td>
<td>74</td>
</tr>
<tr>
<td>Kira</td>
<td>8</td>
<td>120</td>
<td>21</td>
</tr>
<tr>
<td>Daniel</td>
<td>3</td>
<td>79</td>
<td>14</td>
</tr>
</table>
For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms:
headers marked up with table header (th
) elements
scope
attributes on th
for tables with more than a single row or column of table headers.
scope
attributes on th
for tables with more than a single row or column of table headers.
headers and data cells associated using headers
and id
attributes
headers marked up as td
elements with the scope
attribute
headers marked up with ARIA role attributes rowheader
or columnheader
If all checks are false, then this failure condition applies and the content fails the Success Criterion.