H43: Using Id And Headers Attributes To Associate Data Cells ... - W3C

Techniques for WCAG 2.0

Skip to Content (Press Enter)

• Contents
• Intro
• Previous: Technique H42
• Next: Technique H44

On this page:

• Important Information about Techniques
• Applicability
• Description
• Examples
• Resources
• Related Techniques
• Tests

- H43: Using id and headers attributes to associate data cells with header cells in data tables

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.

Applicability

HTML and XHTML

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

The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.

This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.

This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.

Examples

Example 1: A table with multiple rows of headers

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 e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table>

Resources

Resources are for information purposes only, no endorsement implied.

• HTML 4.01 header information with data cells

Related Techniques

• H39: Using caption elements to associate data table captions with 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
• H73: Using the summary attribute of the table element to give an overview of data tables

Tests

Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no," the table is a layout table. If “yes," the table is a data table.

2. For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.

3. For data tables where any cell contains an id or headers attribute,

   1. Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element

   2. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell

   3. Check that all ids are unique (that is, no two elements in the page have the same id)

Expected Results

• If table is a layout table, no cells contain headers or id attributes

• If table is a data table and any cell contains an id attribute, checks #3.a, #3.b, and #3.c are true.

• If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

• Top
• Contents
• Intro
• Previous: Technique H42
• Next: Technique H44

This Web page is part of Techniques and Failures for Web Content Accessibility Guidelines 2.0 (see the latest version of this document). The entire document is also available as a single HTML file. See the The WCAG 2.0 Documents for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the Instructions for Commenting on WCAG 2.0 Documents.

Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.