When is a table a table?

Did u know that some browsers make ”an educated guess“ to determine if a <table> is a data table or a layout table? That affects whether or not it is exposed to #a11y APIs.



“Browsers look at the number of rows, columns & if the rows alternate in color”!!https://t.co/DIa5MGboUg — Sara Soueidan (@SaraSoueidan) September 27, 2019

There has been a discussion about the need for adding role=table to identify some tables in browsers (in this case Chrome) as data tables, as some browsers use heuristics to indicate to AT whether it is a data table or layout table.

When the browser considers a table structure to be layout it sets an iA2 object attribute layout-guess=true in the accessibility tree. Also chrome sets the rowcount and colcount object attributes to 0 (Firefox does not).

table example 1

The following table does not have headers or caption marked up. It has layout-guess=true in Firefox and Chrome:

<table> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> </table>

table example 2

The presence of a b elements is enough for Chrome. It has no layout-guess attribute set. It is not enough for Firefox which has layout-guess=true

<table> <tr> <td><b>cell</b></td><td><b>cell</b></td><td><b>cell</b></td> </tr> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> </table>

table example 3

The presence of a th elements is enough for Chrome and Firefox. It has no layout-guess attribute set.

<table> <tr> <th>cell</th><th>cell</th><th>cell</th> </tr> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> </table>

table example 4

The presence of a caption element is enough for Chrome and Firefox. It has no layout-guess attribute set.

<table> <caption>caption</caption> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> <tr> <td>cell</td><td>cell</td><td>cell</td> </tr> </table>

Suggestions

Wherever there are headers in data table markup as headers using the th element to provide a programatically and visually defined semantic header. Likewise, include a caption for data tables to provide a programatically and visually associated label for the table which benefits all users. In the rare cases where data tables have neither headers or caption then role="table" can be used.

📢If a data <table> is marked up using the correct semantic elements it does not need role=table — Steve Faulkner (@stevefaulkner) September 30, 2019

Unless browser bugs are screwing with the table semantics...

👉https://t.co/LyrB5qu0Ab

👉https://t.co/xAr7HgIbzT — Steve Faulkner (@stevefaulkner) September 30, 2019

Related Reading