Table structure

Tables should only be used to share data or other information that can be clearly organized by rows and columns. 

When a user navigates a table with a screen reader, the table’s row and column headers are read aloud as they navigate. Screen readers speak one cell at a time and reference the associated header cells so the reader doesn’t lose context. This is why it is important to avoid using table structure for layout or visual design purposes.

In an accessible table, each data cell should have a clear association with a header cell, either at the top of the column or at the start of the row.

Consider the following examples of a group class schedule. In Example 1 (inaccessible), not every column has a header cell, blank cells were merged, and it is unclear how the data in each row is related, which makes it difficult for screen readers to interpret the content. 

In Example 2 (accessible), notice how using the days of the week as the column headers simplifies the layout of the table and eliminates the empty cells.

Example 1 (inaccessible): Group class schedule

Example 2 (accessible): Group class schedule

The easiest way to avoid creating complex, inaccessible tables is to carefully consider how the information is organized from the start — sometimes, a table may not be the most appropriate format for the content. If you need to fix a complex, inaccessible table later on, you may need to rethink how the table is formatted, such as reorganizing the headers or breaking the information into more than one table.

• Set header rows and/or columns to label information in the table
• Avoid complex tables with multiple header rows
• Avoid merging or splitting cells
• Avoid blank cells
• Contextualize tables within the content of the surrounding page