Failure of Success Criterion 1.3.1 for not correctly marking up table headers

From WCAG WG

Status

  • New failure technique
  • Revised based on notes from April 24, 2012 teleconference:
    • Test now checks for any known method to mark up headers to be programmatically determinable
    • Description amended to include ARIA roles columnheader and rowheader
    • User Agent Notes updated to reflect differences in table navigation support in 4 common screen readers
  • Added to XML as F91

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)

User Agent Notes

Screen reader support for navigating data tables with and without correct header mark-up varies.

  • JAWS has many keyboard shortcuts to navigate between data cells and read associated header information. The default behavior for JAWS with version 12 and later is to read only headers that have been properly marked as headers by the author of a table.
  • Window-Eyes has different customization options for row and column announcement: both column and row headers, just column or just row headers, just the header that changes, and even defining a specific row or column to compensate for missing markup. For example, "R 1, C 1" would be the first row and column of the table.
  • VoiceOver announces column headers when traversing a table horizontally. It does not currently read row headers even when they are marked up, though it will identify the row number.
  • NVDA has shortcuts for moving between table cells horizontally or vertically, reading the header that changes when navigating. When moving through data cells vertically, NVDA (2011.3 with Firefox 11) will read the first cell of a row even when it is not marked up as header. However, when moving through data cells horizontally, it will only read out the cells in the first row as column headers if they are correctly marked up.

Description

This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA roles columnheader / rowheader) to make the headers programatically determinable from within table content. Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.

Examples

Failure Example 1: headers not marked up appropriately

This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.


Example Code:

<table>
   
   <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Height (cm)</td>
      <td>Weight (kg)</td>
   </tr>   
   
   <tr>
      <td>Linda</td>
      <td>33</th>
      <td>169</th>
      <td>59</th>
   </tr>   
   
   <tr>
      <td>Jack</td>
      <td>37</td>
      <td>184</td>
      <td>74</td>
   </tr>    
   
   <tr>
      <td>Kira</td>
      <td>8</td>
      <td>120</td>
      <td>21</td>
   </tr>   
   
   <tr>
      <td>Daniel</td>
      <td>3</td>
      <td>79</td>
      <td>14</td>
   </tr>  
</table>

View example 1 (opens in same browser window)

Resources

No resources available for this technique.

Related Techniques

  1. H51: Using table markup to present tabular information
  2. F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
  3. G115: Using semantic elements to mark up structure
  4. H43
  5. H63

Tests

Procedure

For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms:

  1. headers marked up with table header (th) elements, optionally with scope attributes
  2. headers and data cells associated using headers and id attributes
  3. headers marked up as td elements with the scope attribute
  4. headers marked up with ARIA role attributes rowheader or columnheader

Expected Results

  • If all checks #1 - #4 are false, then this failure condition applies and the content fails the Success Criterion.