When is a table a table?

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.

Related Reading