[Skip navigation links]

Blog » Screen Readers

Layout table vs data table detection

Posted by Mark Rogers on Jun 26, 2020 | 


Summary The table element in HTML is not always treated as a table by assistive technology. Historically HTML tables have been misused for layout. Before the introduction of CSS Grid in 2017 there was no reliable CSS method to layout HTML on a grid, so tables were often used instead (and some legacy browsers still don't support CSS Grid). This means there are two types of table: Data tables containing data where rows and columns have meaning (e.


Table cell header calculation for AT

Posted by Mark Rogers on Feb 14, 2016 | 


Summary This post describes how table cell headers for screen-readers are calculated. TH with SCOPE=ROW or SCOPE=COL is unambiguous and widely supported TD with SCOPE is non-conforming in HTML 5, and is ignored as a header on some browsers (works in Apple WebKit, but ignored in Chromium WebKit). On tables with headers in the top row, or first column, TH without SCOPE usually works. TD HEADERS is problematic because it assumes a single list of headers for each cell, but accessibility APIs expose row and column headers as separate properties On any other table, TH without SCOPE produces wildly varying results.