All non-empty <td> elements in a table larger than 3 by 3 must have an associated table header

Log in (Premium content) Request a demo

Rule Description

Data table markup can be tedious and confusing. It is important that it is done semantically and with the correct header structure. Screen readers have a number of features to make table navigation easier, but tables must be marked up accurately for these features to work properly.

The Algorithm, in Simple Terms

Checks that data tables are marked up semantically and have the correct header structure

Why this is Important

Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

How to Fix the Problem

To fix the problem, ensure that each non-empty data cell in a large table has one or more table headers. All table data cells (<td>) must have a table header to ensure screen reader users can make sense of tabular data.

Note: A table is considered large if it is 3 or more cells wide and 3 or more cells high.

Compliance Data & User Impact

User Impact: Serious
Disabilities Affected:
  • Blindness
  • Deafblindness
Issue Type:
  • WCAG 2.0 (A): MUST
  • Section 508: MUST
  • Deque Experimental
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • 1194.22 (g) Row and column headers for data tables

Related Deque University Course Pages

Related Deque Code Library Examples

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML 5
Relevant Custom Widget Type(s):
  • Table - Sortable
  • Table - Responsive
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: td-has-header