Table headers in a data table must refer to data cells

Markup for data tables can be tedious and perplexing. Tables should be marked up correctly in terms of header format and semantics. Table navigation is made easier by features in screen readers, but for these capabilities to function properly, the tables must be precisely marked up.

Tables are announced in a certain way by screen readers. The potential for unclear or erroneous screen reader output exists when tables are not properly marked up.

Screen reader users are unable to correctly understand the relationships between the cells and their contents visually when tables are not adequately structured and marked up semantically.

What this Accessibility Rule Checks

Verifies that each header cell is referred to as a header of a column or row in data tables by checking their markup.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI - Tables Tutorial

→

W3C Reference

WCAG 2.1 - Using id and headers attributes to associate data cells with header cells in data tables

→

W3C Reference

WCAG 2.1 - Using table markup to present tabular information

→

W3C Reference

WCAG 2.1 - Using the scope attribute to associate header cells and data cells in data tables

→

W3C Reference

WCAG 2.1 - Using the summary attribute of the table element to give an overview of data tables

→