View source for Failure of Success Criterion 1.3.1 due to not using headers and id attributes to associate data cells to multiple headings

[[Category:Failure Techniques]]
==Status==
* New failure technique

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

This failure occurs when content cells (<code>td</code>) in complex data tables have nested headers (<code>th</code>) and the relationship between content cells and their headers cannot be programmatically determined. Either headers are not associated via the <code>id</code> and <code>headers</code> attributes, or the association is faulty.
==Examples==

Note: The examples below are 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 associated to nested headers===

In this example, nested headers are used but content cells are not linked via the <code>id</code> and <code>headers</code> attributes.

Example Code:

<pre>
<table>
   <tr>
     <th rowspan="2">Homework</th>
     <th colspan="3">Exams</th>
     <th colspan="3">Projects</th>
   </tr>
   <tr>
     <th>1</th>
     <th>2</th>
     <th>Final</th>
     <th>1</th>
     <th>2</th>
     <th>Final</th>
   </tr>
   <tr>
    <td>15%</td>
    <td>15%</td>
    <td>15%</td>
    <td>20%</td>
    <td>10%</td>
    <td>10%</td>
    <td>15%</td>
   </tr>
  </table>
</pre>

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

===Failure Example 2: Table content not associated to nested headers===

In this example, nested headers are used but content cells are incorrectly associated via the <code>id</code> and <code>headers</code> attributes.

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>
    <td headers="e p2">15%</td>
    <td headers="e pf">20%</td>
    <td headers="e e1">10%</td>
    <td headers="e e2">10%</td>
    <td headers="e ef">15%</td>
   </tr>
  </table>
</pre>

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

==Resources==

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

#[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]
#[http://www.oturn.net/wcag/H39.html H39: Using caption elements to associate data table captions with data tables]
#[http://www.oturn.net/wcag/H73.html H73: Using the summary attribute of the table element to give an overview of data tables]

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

#Check if data tables contain extraneous content that does not fit into the tabular grid structure.

===Expected Results===

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