Accessible data tables

Data tables may not be the most thrilling things ever produced in HTML, but they’re still one of the things most frequently fubared on the web today. There are a few subtle differences in the way HTML5 handles data tables, so it’s a good opportunity to take another look at this web page workhorse.

Quick data table recap: Data tables create relationships between pieces of information held in rows and columns. When you look at the table, those relationships are easy to understand because of the table’s layout and design. If you use a screen reader though, you’ll need another way to discover those relationships, and that (of course) is why the underlying HTML is so important.

First, the caption element. It hasn’t changed in HTML5 except that the align attribute has been deprecated. It’s used to provide a quick notation on the table’s content.

When a screen reader focuses on a table, the caption is read automatically. That makes it easy for a blind person to understand what the table contains. If an NVDA user used the t shortcut key to move to the table in example 1 (see downloadable file), they’d hear ‘Hot drink consumption statistics’.

The headers attribute is still present in HTML5, but it can now be applied to the th element as well as td. It creates an association between the header and the table cell.

The headers attribute takes the idref of the th and creates an association screen readers can use. The content of the th with the ID is announced by the screen reader, before the content of the th with the corresponding headers attribute. Moving across Alice’s row in the table in example 2, a reader user will hear “Tea 1 cup, Coffee 3 cups”.

The scope attribute has also undergone a slight change. It can no longer be applied to the td element in HTML5, only the th. It’s still used to define the range of cells that the th applies to. The table in example 3 demonstrates this.

Using the headers attribute on both the th and td elements is more time-consuming, but it is more bulletproof. Legacy screen readers tend not to play well with the scope attribute, so for the time being at least the header/id association is more robust.

Finally, the thead, tbody and tfoot (not shown here) elements are still available in HTML5. The difference is that none of their HTML4 attributes are supported. These elements are useful for long data tables because browsers can enable the tbody content to scroll, while leaving the thead and tfoot content visible.

It’s a misconception that tables ought to be avoided. We’ve thankfully moved past the days when tables were used for layout, but well structured and clearly designed data tables make it easy for screen reader users to access tabular data in a meaningful way.

Discover the 20 best wireframing tools for designers at Creative Bloq.