Categories
aria design layout table

Layout Tables Tip

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:

2 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?

Leave a Reply

Your email address will not be published. Required fields are marked *