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.