Failure of Success Criterion 1.3.1 due to using elements within data tables that obscure structural relationships
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 (th) and content cells (td). 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:
<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>
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:
<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"> </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>
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
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G115: Using semantic elements to mark up structure
- 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.