View source for Failure of Success Criterion 1.3.1 due to using elements within data tables that obscure structural relationships

[[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 data tables contain extraneous elements that obscure the relationship between heading cells (<code>th</code>) and content cells (<code>td</code>). This occurs when content that does not fit into the structure of the tabular grid.

==Examples==


===Failure Example 1: Content is placed in a row above column headings===

In this example, the first row of a data table contains not the column headings, but a description of the table that would go into the caption element in a properly formatted table.


Example Code:

<pre>
<table>
   <tr>
      <td colspan="4">Some facts about the Carter family</td>
   <tr>   
   
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Weight</th>
   <tr>   
   
   <tr>
      <td scope="row">Linda</td>
      <td>33</th>
      <td>169 cm</th>
      <td>59 kg</th>
   <tr>   
   
   <tr>
      <td scope="row">Jack</td>
      <td>37</td>
      <td>184 cm</td>
      <td>74 kg</td>
   <tr>    
   
   <tr>
      <td scope="row">Kira</td>
      <td>8</td>
      <td>120 cm</td>
      <td>21 kg</td>
   <tr>   
   
   <tr>
      <td scope="row">Daniel</td>
      <td>3</td>
      <td>79 cm</td>
      <td>14 kg</td>
   <tr>
</table>
</pre>

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

===Failure Example 2: An empty row separates two groups of content in a data table===

Two groups of tabular content are provided in the same table, separated by an empty row.


Example Code:

<pre>
<table>
   <tr>
      <td colspan="4">Some facts about the Carter family</td>
   <tr>   
   
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Weight</th>
   <tr>   
   
   <tr>
      <td scope="row">Linda</td>
      <td>33</th>
      <td>169 cm</th>
      <td>59 kg</th>
   <tr>   
   
   <tr>
      <td scope="row">Jack</td>
      <td>37</td>
      <td>184 cm</td>
      <td>74 kg</td>
   <tr>    
   
   <tr>
      <td scope="row">Kira</td>
      <td>8</td>
      <td>120 cm</td>
      <td>21 kg</td>
   <tr>   
   
   <tr>
      <td scope="row">Daniel</td>
      <td>3</td>
      <td>79 cm</td>
      <td>14 kg</td>
   <tr>
   
  
   <tr>
      <td colspan="4">&nbsp;</td>
   <tr>   
  
  
   <tr>
      <td colspan="4">Some facts about the Rodriguez family</td>
   <tr>   
   
   <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Height</th>
      <th>Weight</th>
   <tr>   
   
   <tr>
      <td scope="row">Bob</td>
      <td>32</th>
      <td>189 cm</th>
      <td>87 kg</th>
   <tr>   
   
   <tr>
      <td scope="row">June</td>
      <td>31</td>
      <td>161 cm</td>
      <td>58 kg</td>
   <tr>    
   
   <tr>
      <td scope="row">John</td>
      <td>11</td>
      <td>155 cm</td>
      <td>41 kg</td>
   <tr>   
   
   <tr>
      <td scope="row">Rosy</td>
      <td>4</td>
      <td>87 cm</td>
      <td>19 kg</td>
   <tr>
    
  
</table>
</pre>

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

===Failure Example 3: Control elements inside a data table===

This might be be a weekly schedule with buttons or links to move to previous or next weeks placed in the first row.
===Failure Example 4: Rows with colspan containing annotation in between data rows===

Similar to example 1, perhaps redundant. Example content in a data cell may contain an asterics for an annotation which is placed in a row with merged cells underneath the data row.

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

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