Non-empty <td> elements in larger <table> must have an associated table header

Markup for data tables can be tedious and perplexing. Tables must be semantically marked up and have the proper header structure. 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 the correct header structure and semantic markup of data tables.

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

→