"id" and "headers" or "scope" for data table accessibility?

Question

Which method is most supported by screen readers - id and headers or scope attributes?

I am finding conflicting information about how supported either of these methods are in associating HTML table headers to table cells.

Seel

Answer 1

It depends on the complexity of your data table. Using scope is generally the best choice.

If you use colspan or rowspan for instance, using id and headers would be a better choice.

H43: Using id and headers attributes to associate data cells with header cells in data tables:

This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute.

That being said, when a data table needs such supplementary attributes, it might be hard for other people (not using screen readers) to associate a cell with its headers, and it might be a necessary thing to have supplementary visual cues for headers (like alternating color, or mouseover effects, etc.).

Mineral