Tables may be used for layout and data alike, but they must be constructed properly to meet the accessibility guidelines and to work well in responsive mode.
This guide first explains how to create a layout or data table. The hard part is using tables appropriately, which constitutes the bulk of this guide.
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 content in the cells of your table with this in mind.
- Do not use a header row or column.
- Do not enter a title/caption.
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 easily 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.
- 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 perhaps 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 6 columns:
Consider this alternate layout with just 2 columns. Note the application of a header row to make the table even more accessible.