View source for Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

[[Category:Failure Techniques]]
[[Category: Added to XML]]
==Status==
* New failure technique
*Comments from 29 March 2012 teleconference:
** The description is not clear enough about what the problem is; we needed to study the code example carefully and discuss it together to determine that the problem was that data cells were being associated with the wrong headers. It was not, for instance, a syntax problem with the way that the id and header attributes were being used. Please write a longer description that helps people understand the problem clearly.
** This failure is applicable to any table that uses id and header attributes, not just to complex tables.
** We suggest that the description of the example explicitly point out which markup in the example is in error.
* Surveyed [https://www.w3.org/2002/09/wbs/35422/20120524misc/ 24 May 2012]
* Moved to XML as F90

==Applicability==

HTML and XHTML

This failure relates to:

*Success Criterion 1.3.1 (Info and Relationships)
**How to Meet 1.3.1 (Info and Relationships)
**Understanding Success Criterion 1.3.1 (Info and Relationships)


==Description==
One way for authors to explicitly associate header cells to data cells is by using the <code>id</code> and <code>headers</code> 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 <code>id</code> and <code>headers</code> attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.

==Examples==
Note: The example below is based on the complex data table presented as example 1 of [http://www.w3.org/TR/WCAG-TECHS/H43.html Technique H43: Using id and headers attributes to associate data cells with header cells in data tables].

===Failure Example 1: Table content not correctly associated to nested headers===

In this example, nested headers are used, but the content cells are incorrectly associated via the <code>id</code> and <code>headers</code> 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:

<pre>
<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>

</pre>

[http://www.oturn.net/wcag/Failure_1.3.1_02-example.html View example (opens in same browser window)]

==Resources==

No resources available for this technique.
==Related Techniques==

# [http://www.w3.org/WAI/GL/WCAG20-TECHS/H43.html H43: Using id and headers attributes to associate data cells with header cells in data tables]
#[http://www.oturn.net/wcag/F46.html F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables]
#[http://www.oturn.net/wcag/G115.html G115: Using semantic elements to mark up structure]

==Tests==
===Procedure===

#For tables that associate data cells to header cells via the <code>id</code> and <code>headers</code> attributes, check that the programmatic association is correct.

===Expected Results===

*If check #1 is false, then this failure condition applies and the content fails the Success Criterion.