Accessible Tables

Tables are very extensively used in Web Pages. These are used to display data such as shopping items, transactions, etc that belong together. Tables are used to show data that has same properties.

By default, HTML tables — i.e. tables on web pages are not necessarily well understood by screen readers. Screen readers read datas without specifying which row and column is being read. Due to this, a visually impaired user may have difficulty following the context. E.g. Screen Readers may only read values in the HTML table such as the one shown below and user may not have proper context of which row or column is being read.

Table showing 2 months of Chicago High and Low temperatures

In order to make the table accessible to screen readers, it is recommended that the following attributes be added.

• <caption> element between the <table> and the <thead> OR use aria-describedby.
• use scope attributes with values of “row” or “column” in row and column headers as appropriate

These are shown in the gist below

Here are few specific of above HTML that make this table more accessible to screen readers:

On Line 13 the table element has a aria-describedby attribute that describes the table. Voice Over Utility was able to understand this and announce this. Alternately, on line 14, we have the <caption>element which is understood by a variety of screen readers. This needs to be experimented with as some readers may or may not support both these.

On line 17–19, we have scope=”column” attribute. Now Voice Over reads this as “Column 1 of 3 Month”, “Column 2 of 3 Low Temperature” and “Column 3 of 3 High Temperature”.

Lines 24 and 30 have <th> element with scope of row. This further assists screen readers.

These are the best practices on making tables more accessible viz.

using caption (or aria-described by) and 
using scope=”row” or “column” as appropriate

One needs to check the specifications of each screen reader to see which of these are supported.

To run the above html, save this in a folder and also have the following CSS in the same folder. Now this HTML will render as shown in the first screen shot above and this can be tested over a built in screen reader (such as NVDA for Windows or Voice Over for Mac) .