5: Creating Accessible Tables

What makes a table accessible?

Tables are excellent tools for displaying data sets. To be accessible to all users, tables should have three things: alt text, designated headers and simple structure.  

We’ll use the table below as an example:  

Alt Text for Tables

When a screen reader user navigates to a table, the software will announce the table’s alternative text (often the same as the table’s title, which in this case is “5K Contestants”) and the table’s size (“three columns, four rows”). 

The user can then decide if they want to hear the full data set.  

Alt text is always important but is especially critical on pages with multiple tables, so a user with a screen reader can distinguish one table from another. 
 

Designated Headers 

A screen reader user can hear a table’s contents in one of two ways:  

1. In regular mode, the screen reader starts in the upper left cell of the first row, reading across that row, then reading across the second row, and so on.
    

2. In navigation mode, the user can navigate from cell to cell within a table while hearing the screen reader announce the corresponding column header and/row header.  

Without designated headers, navigation mode is not possible. 

The example table above has a row header (Name, Age and Hometown). 
 

Simple Structure

It’s best to keep your table design simple. Use only one column header and/or one row header. Don’t merge the cells. And, if your data set is complex, split it up into multiple tables. 

This nested table is not accessible: 

A more accessible option would be to create two tables:

Simple structure makes tables accessible to all users, including people using a screen reader in navigation mode and people who are neurodiverse. (Neurodiversity is a term used to describe natural variations in the human brain — such as ADHD, autism and dyslexia.) 

When are tables not an appropriate choice? 

Always create a real table. If you post a photo or screenshot of a table, a screen reader will treat it like an image, not a data set. 

Tables also shouldn’t be used to control layout or page design, since they can disturb the reading order of a document or webpage. Screen readers use reading order to create a sequential presentation of page elements.

Watch Today's Video