This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

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

From WCAG WG
Jump to: navigation, search

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

  1. F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
  2. G115: Using semantic elements to mark up structure
  3. H39: Using caption elements to associate data table captions with data tables
  4. [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

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