Notes on fixing incorrect table structure using ARIA

Updated 18/08/2020

Replaced use of role grid/gridcell with table/cell as these roles are now supported.

Notes:

Use with caution for static table fixes:
The role=table and role=cell map to the static HTML table and td elements.

As always the best advice is use native HTML elements whenever possible.

Broken table structure (2 tables visually presented as one table)

Dog NamesCat NamesCow names
FidoWhiskersClarabella
WoofieClawsGlenn

code

<table> 
<tr>
<th>Dog Names</th>
<th>Cat Names</th>
<th>Cow names</th>
</tr>
</table>

<table>
<tr>
<td>Fido</td>
<td>Whiskers</td>
<td>Clarabella</td>
</tr>
<tr>
<td>Woofie</td>
<td>Claws</td>
<td>Glenn</td>
</tr>
</table>

Accessibility Tree representation

The header row is in a separate table to the data rows.

Aria Fix applied to broken table structure

note: use test page as WordPress stripped ARIA attributes in the table below.

Dog NamesCat NamesCow names
FidoWhiskersClarabella
WoofieClawsGlenn

Code: Table with all roles declared (explicit anxiety code)

<div role="table">
<table role="presentation">
<tr role="row">
<th role="columnheader">Dog Names</th>
<th role="columnheader">Cat Names</th>
<th role="columnheader">Cow names</th>
</tr>
</table>
<table role="presentation">
<tr role="row">
<td role="cell">Fido</td>
<td role="cell">Whiskers</td>
<td role="cell">Clarabella</td>
</tr>
<tr role="row">
<td role="cell">Woofie</td>
<td role="cell">Claws</td>
<td role="cell">Glenn</td>
</tr>
</table>
</div>

Code: Table with only table/presentation roles declared (implicit trust code)

<div role="table">
<table role="presentation">
<tr>
<th>Dog Names</th>
<th>Cat Names</th>
<th>Cow names</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>Fido</td>
<td>Whiskers</td>
<td>Clarabella</td>
</tr>
<tr>
<td>Woofie</td>
<td>Claws</td>
<td>Glenn</td>
</tr>
</table>
</div>

Accessibility Tree representation

The header row and data rows are in the same table.

Note: thanks to Hans Hillen, for the example on which this article is based

Further reading

Accessible Data Tables with Static Headers by Gez Lemon

Categories: Development