Category:Techniques/HTML/Using-heading tags to markup row-header cells that group rows in a data table

Status

Reviewed by WCAG on October 8, 2013. Not accepted. Joshue108 to look into whether the concept of headings to define sections in a table can be added to heading techniques

Title:

Using heading tags (h2, h3, etc) to markup row-header cells that group rows in a data table

Applicability:

This technique applies to HTML content.
This technique relates to:

• Success criterion 1.3.1 (Info and relationships)

User Agent Issues:

This technique works with:

• JAWS 13 / 14 with Internet Explorer 8 / 9, Firefox
• NVDA 2012 / 2013 with Firefox
• Unfortunately Safari with VoiceOver does not have an equivalent for the JAWS-T key for reading nearest heading while navigating a data table.

Note: An enhancement issue has been filed with nvaccess.org (#3554) that suggests that NVDA+T key should speak the nearest heading text alongwith the page title to support H80 and this technique

Description:

The objective of this technique is to use suitable heading elements (h2, h3, etc) to mark up a data cell in a row that serves as a group header for a set of data rows that follow it. The heading provides contextual information for related data cells. By employing keystrokes like JAWS+T (also suggested by Technique H80) a user can determine the context (i.e. nearest group heading) for a data cell as needed without navigating away from the cell. Users can navigate large tables efficiently using heading-navigation and also comprehend the table’s structure easily. This technique is suitable when a single heading level (h2, h3, h4, etc) can be used to group different sets of data rows in the table.

Therefore, while navigating a table marked up in this manner, the screen reader will only announce the column headers right above the data cell and the row header usually in the first column to the left of the data cell. The group header will not be repeated as is often the case if one uses the header-id method. Developers too may be able to restrict the use of the headers-id technique (H43) of associating header cells with data cells only to tables that are very complex. Marking up large tables manually using H43 can often be time consuming and tedious.

Examples:

Example-1:

Table 589. Multiple Jobholders- see Alternative-1 with H3 for grouping row headers <a href="http://mars.dequecloud.com/demo/Census_2013.htm">Heading element h3 is used to group the rows in this table:</a> by Age / Race and Hispanic ethnicity /Marital status / Full- or part-time status

Note: The first table on this page uses heading-id method ( technique H43).

Related Techniques:

• H43: Using id and headers attributes to associate data cells with header cells in data tables
• H51: Using table markup to present tabular information
• H63: Using the scope attribute to associate header cells and data cells in data tables

Test Procedure:

1. Data rows in the table are grouped and a group heading is placed in the row above the first data row in every group
2. All groups of rows in the table are at the same hierarchy level

Expected result :

Conditions 1 and 2 are true

Justification: Note for WCAG-WG (This is not part of technique)

1. Often developers omit to use headers-id method for complex tables . Users then have to grapple with an inaccessible table. On the other hand, the technique suggested here can be easily implemented for several complex tables. Users will be well served. It may also be noted that this technique results in a better user experience as users can control verbosity … something which is not possible if headers-id method is used.
2. The example code passes validation for HTML 4 and HTML5
3. Most other documented techniques in “Techniques for WCAG 2” say in which situation a particular technique is applicable. The same applies to the technique suggested here.