Complex data table is missing ID and/or header attributes to associate headers with data cells
1.3.1 info and relationships
Introduction
This document provides information about the related accessibility check:
Complex data table is missing ID and/or header attributes to associate headers with data cells
What
This check ensures that complex data tables use id and header attributes to explicitly link header cells with their corresponding data cells. In tables with multi-level headers or non-standard structures, these attributes are necessary to clarify the relationship between headers and data points.
Why
Without ID, header, or both attributes, screen readers might lose the relationship between a data cell and its multiple headers, which makes the information confusing or impossible to understand.
Who
This check affects individuals with the following:
Visual impairments: Who rely on assistive technologies such as screen readers to navigate and interpret data
Cognitive disabilities: Who need the programmatic structure to build a mental map of the table
Any users: Who rely on assistive technologies
Examples
This section provides a pass and fail example of this check.
Pass example
The following table correctly uses unique id attributes on header cells and references them with the headers attribute in data cells.
The following table contains complex nested headers but lacks the id and headers attributes, which leaves the relationship between data and headers hard to distinguish for screen readers.
This section provides information on how to identify, review, and fix the failed check.
How to identify it
Examine the page and identify any complex tables.
How to review it
To review this error check, use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Check if the table has multiple layers of headers or cells that span multiple rows or columns. If it does, verify that each header cell (<th>) has a unique id and that each related data cell (<td>) has a headers attribute that contains the corresponding IDs.
Complex data table is missing ID and/or header attributes to associate headers with data cells
1.3.1 info and relationships
Introduction
This document provides information about the related accessibility check:
Complex data table is missing ID and/or header attributes to associate headers with data cells
What
This check ensures that complex data tables use id and header attributes to explicitly link header cells with their corresponding data cells. In tables with multi-level headers or non-standard structures, these attributes are necessary to clarify the relationship between headers and data points.
Why
Without ID, header, or both attributes, screen readers might lose the relationship between a data cell and its multiple headers, which makes the information confusing or impossible to understand.
Who
This check affects individuals with the following:
Visual impairments: Who rely on assistive technologies such as screen readers to navigate and interpret data
Cognitive disabilities: Who need the programmatic structure to build a mental map of the table
Any users: Who rely on assistive technologies
Examples
This section provides a pass and fail example of this check.
Pass example
The following table correctly uses unique id attributes on header cells and references them with the headers attribute in data cells.
The following table contains complex nested headers but lacks the id and headers attributes, which leaves the relationship between data and headers hard to distinguish for screen readers.
This section provides information on how to identify, review, and fix the failed check.
How to identify it
Examine the page and identify any complex tables.
How to review it
To review this error check, use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Check if the table has multiple layers of headers or cells that span multiple rows or columns. If it does, verify that each header cell (<th>) has a unique id and that each related data cell (<td>) has a headers attribute that contains the corresponding IDs.
Web Governance