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

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 (td) in complex data tables have nested headers (th) and the relationship between content cells and their headers cannot be programmatically determined. Either headers are not associated via the id and headers attributes, or the association is faulty.

Examples

Note: The examples below are based on the complex data table presented as example 1 of 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 id and headers attributes.

Example Code:

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

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 id and headers attributes.

Example Code:

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

View example 2 (opens in same browser window)

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. H73: Using the summary attribute of the table element to give an overview of data tables

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.