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 Names Cat Names Cow names
Fido Whiskers Clarabella
Woofie Claws Glenn

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 Names Cat Names Cow names
Fido Whiskers Clarabella
Woofie Claws Glenn

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

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.