It’s 2015, so hopefully web developers know that table elements should not be used for layout. There are many reasons why CSS for layout is better but at the core, HTML tables are data tables; they’ve always been meant for data.
But even today, sometimes a table is used for layout, for whatever reason—time constraints, lack of CSS skills, legacy code, etc.
If a table is used for layout, add ARIA role of presentation to the table element. This will remove the table elements from the Accessibility API which provides for a better user experience for users of assistive technology, particularly screen readers.
Other elements such as caption, summary, and thead should be removed. See the Microsoft resource ARIA Presentation Table Error.
Here’s a code example derived from a W3C example for the use of role=presentation. The following code in the HTML tree:
<table role="presentation">
<tr><td>Foo bar</td><tr>
</table>
Becomes this in the accessibility tree:
<>
<><>Foo bar</></>
</>
Further reading:
- Layout tables and repair techniques – Juicy Studio
- See Note under Tabular Data W3C specification
- Layout Tables that are No Longer Read as Data Tables Due to ARIA Role – test case by Pearson Education
- Why accessibility APIs matter by Marco Zehe
3 replies on “Layout Tables Tip”
What if a table is nested inside a table should we be applying role=prentation for every table, be it parent or child ? or the role that is applied on parent table should be carried to the the inner/child tables implicitly?
I believe the former — place role=presentation on every table element in that case.
[…] Layout Tables – Dennis Lembree […]