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:

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>