Simplify Data Tables to Just Column Headers, if Possible

Author:
Paul Bohman
Director of Training
Twitter: @paulbohman

The techniques for creating accessible tables have been around a long time. Sadly, browser and screen reader support for tables is still less than ideal. There isn't a single screen reader on the market that can successfully read all kinds of data tables correctly.

Column Headers Work in All Screen Readers

The good news is that all screen readers can read simple data tables successfully if the table has just one row of column headers in the first row. Designate the cells in the first row as header cells with <th scope="col">, and don't get fancy with row headers or spanned/merged cells. That's a guaranteed way to ensure the table is accessible.

Other Methods Work, but Not Reliably Across Different Brands

There are several ways of creating accessible tables that are more complex (headers + id, scope="row", rowgroup, colgroup, and variations on those), and all screen readers read some of those methods successfully, but the problem is that different brands read different methods, and fail on others, and there isn't a consistent pattern or single way that you, as a content creator, can count on complex tables to be read successfully across all screen readers and browsers. Until things improve with screen readers, there is no one guaranteed way to make complex tables accessible for all screen reader users under all circumstances.

Note: I have submitted bug reports to Apple, Mozilla, and NVDA on these issues. Mozilla promises that an upcoming version of Firefox will add better support for colgroup, rowgroup, and the headers + id method, which will automatically fix the problems with NVDA in Firefox, so that's promising!