Short note on When is a table a table?
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.
— Sara Soueidan (@SaraSoueidan) September 27, 2019
“Browsers look at the number of rows, columns & if the rows alternate in color”!!https://t.co/DIa5MGboUg
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...
— Steve Faulkner (@stevefaulkner) September 30, 2019
👉https://t.co/LyrB5qu0Ab
👉https://t.co/xAr7HgIbzT