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.
As such it’s use effects the behaviour of some AT, certain keystrokes are passed through to the browser and interaction instructions may be announced, use of aria-readonly="true" can mitigate 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 custom table structure out of other
As always the best advice is use native HTML elements whenever possible.
Dog Names | Cat Names | Cow names |
---|
Fido | Whiskers | Clarabella |
Woofie | Claws | Glenn |
<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>
Dog Names | Cat Names | Cow names |
---|
Fido | Whiskers | Clarabella |
Woofie | Claws | Glenn |
<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>