Notes on fixing incorrect table structure using ARIA

Posted on Tuesday, 7 October 2014 by Steve Faulkner

Notes:

Use with caution for static table fixes:
The role=grid and gridcell don’t map to the static HTML table and td elements.

From the ARIA 1.0 specification:

A grid is an interactive control [like a spreadsheet (for example)]

A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.

gridcell (role) A cell in a grid or treegrid.

As such its use effects the behaviour of some AT; certain keystrokes are passed through to the browser and interaction instructions may be announced (For example the screen reader JAWS identifies a structure with role=grid as a “grid” not a “table”), use of aria-readonly="true" can mitigate some of this. There is currently work going on for ARIA 1.1 to add role=table which will map directly to the HTML table element so it will be able to be used to create a custom table structure out of other 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:

<div role="grid" aria-readonly="true">
<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="gridcell">Fido</td>
<td role="gridcell">Whiskers</td>
<td role="gridcell">Clarabella</td>
</tr>
<tr role="row">
<td role="gridcell">Woofie</td>
<td role="gridcell">Claws</td>
<td role="gridcell">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

Questions?

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. 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 HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

Comments for this post are closed.