How can I make tables more accessible?
Data tables present the following two issues:
- Users of screen readers cannot read tables the same way sighted users do. Sighted users can tell at a glance what column and row a given cell is associated with, but if a table is not coded properly, a screen reader will read each cell in the table left to right, from the top of the table to the bottom. It will not make any sense to the user.
- A table may have its size constrained such that if someone tries to view the table on a small screen or needs to zoom in on the page to read it, the table does not display properly.
This article answers the following questions:
Important: Tables should only be used for tabular data, not for layout.
What does a table need to be accessible?
In an accessible table:
- The first row and/or first column contains header information that defines the relationship between the header cell and data cell. Header information is absolutely essential to make a table readable by users of assistive technology.
- A table caption describes the table's content.
- The table's width and/or height is specified as a percentage of the page. This will allow the table to be resized according to the size of the screen and/or text the reader is using.
Below are two examples of tables with these features.
Example: Simple table
A simple table is displayed above, Books Read by John and Tomeko. Only column headers are needed to identify which person read the books listed.
Example: Complex table
Above is a more complex table: John's and Tomeko's Weekly Reading List. This table adds data about when the books were read. Both column and row headers are needed so a screen reader user will know that The Sound and the Fury was the book read by Tomiko on Week 3.
How do I make a table accessible?
When adding or editing a table in the Rich-Text Editor:
- You should indicate the Width and/or Height of the table as a percentage, e.g., 50%.
- For Headers, select whether to use the information provided in the First Row, First Column or Both to associate this information with the corresponding data cells. You MUST select appropriate Headers to make the table readable by users of assistive technology.
- Add a Caption for the table that will inform readers of the table's content. In the table examples above, the caption for the simple table was Books Read by John and Tomeko, while the caption for the complex table was John's and Tomeko's Weekly Reading List.
For steps to add or edit a table, see How do I add/edit a table in the Rich-Text Editor?