Table cells that use the headers attribute must only refer to cells in the same table

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.

Sighted people can typically identify the table’s headers and their relevance to the data at a glance. This needs to be done in the markup for non-sighted users.

When a data table is created with accessibility in mind, the user can go from cell to cell while hearing the screen reader proclaim the matching table headers for the data cells. This is known as table navigation mode. When navigating through huge data tables or when cells include similar-sounding data that could be easily misconstrued, hearing the table headers is extremely useful.

But if the table lacks accessibility features, the table navigation method is useless.

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: Using id and headers attributes to associate data cells with header cells in data tables

→

MDN Reference

MDN: HTML Tables

→