Are table headers scoped properly?


Ensure that complex headers inside a table are programmatically associated with the data.

Why this matters

In Are table headers clear and coded as <th> elements? we tested to ensure that table headers were present. However, we didn’t address the issue of complex table headers, such as headers that appear on the side of the table, or that span multiple columns. This test addresses that set of situations.

How to implement

See HTML table advanced features and accessibility on MDN.

How to test

Manual testing

  1. Inspect the page.
  2. Ensure the table headers are encoded in <th> elements.
  3. If the table headers are complex, ensure that the <th> elements include a scope attribute that specifies the direction and type of scope the header represents.

Screen reader testing

  1. Listen to the table on the page.
  2. Ensure the screen reader is correctly attributing the table header to the proper cells, including complex <th> elements.