Overview

Tables may be used for layout and data alike, but they must be appropriately constructed to meet the accessibility guidelines and to work well in responsive mode.

This article first explains how to create a layout or data table. The hard part is using tables appropriately, which constitutes the bulk of this guide.

Back to top

Information

Layout Tables

When using tables for layout (controlling the placement of content on the page), there are three guidelines:

• Screen readers read the content of cells row-by-row moving from left to right. Organize the material in the cells of your table with this in mind.
• Do not use a header row or column.
• Do not enter a title/caption.
  
  

Data Tables

Follow these guidelines to create accessible data tables:

• Use row and column headers (the options with the dark rows and columns in the image above).
• Include a title/caption (a brief description of the table).

For example, year-to-date sales progress:

Layout Table Linearization

As mentioned above, screen readers move through a table from left to right and from top to bottom, so the content of your layout table has to make sense in that order. Take this table, for example: 

With the layout above, the name of the school and its address are going to be interrupted by the names of the administrators.

This is a version that would make sense for screen reader users: 

Proper Use of Headers 

Headers provide additional information about the content of the cells. 

 For example, state capitals and population:

• A sighted user can quickly tell that Nashville is the capital of Tennessee, but a blind user cannot quickly scan the table to read the row and column labels.
• Screen readers announce the name of the row and column headers along with the cell content.
• Without the headers, data tables are quite inaccessible, especially the large ones.
  
  

Complex Tables

• If you find yourself creating large, complex tables with merged cells and tables within tables, you should step back and reconsider how to present your information.
• Perhaps several separate tables would be better than one complex table, and probably tables are not necessary at all.
• Too many columns can also represent a problem. Consider combining information and using fewer cells.
  
  For example, this table has a lot of information spread out across six columns:
  
  
  
  Consider this alternate layout with just two columns. Note the application of a header row to make the table even more accessible.
  
  

Back to top