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:
One way for authors to explicitly associate header cells to data cells is by using the id
and headers
attributes. These allow the author to associate multiple header cells to a particular data cell, which can be necessary when complex data tables with more than one level of heading are used.
The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of id
and headers
attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.
Note: The example below is based on the complex data table presented as example 1 of H43: Using id and headers attributes to associate data cells with header cells in data tables (HTML) .
In this example, nested headers are used, but the content cells are incorrectly associated via the id
and headers
attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.
Example Code:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e p1">15%</td> // should be "e e1"
<td headers="e p2">15%</td> // should be "e e2"
<td headers="e pf">20%</td> // should be "e ef"
<td headers="e e1">10%</td> // should be "p p1"
<td headers="e e2">10%</td> // should be "p p2"
<td headers="e ef">15%</td> // should be "p pf"
</tr>
</table>
For tables that associate data cells to header cells via the id
and headers
attributes, check that the programmatic association is correct.
If check #1 is false, then this failure condition applies and the content fails the Success Criterion.