How can I make tables accessible?
Data tables may present the following issues:
- People using screen readers cannot read tables the same way sighted individuals do. A sighted person 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 person listening.
- 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 someone using 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. (Tables created using the Rich Content Editor in Canvas automatically have their width set as a percentage.)
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 someone using a screen reader will know that The Sound and the Fury was the book read by Tomeko on Week 3.
How do I make a table accessible?
In the Rich Content Editor, you can edit the Table Properties to add a caption to your table. To specify headers, you would select the text in the column or row that should have header cells and use the Cell Properties options to convert the selected cells to header cells.
For complete steps to add tables, see How do I insert a table using the Rich Content Editor as an instructor? (opens new window) or How do I insert a table using the Rich Content Editor as a student? (opens new window)
Add a table caption.
Select the table.
After inserting a table in the Rich Content Editor, select it by:
- Clicking on the table with a mouse,
- Or placing your cursor to the right of or just below the table, then pressing the left arrow key.
Select Table, then Table properties.
- From the editor's menu, select Table.
- Select Table properties.
Select Show caption, then Save.
In the Table Properties dialog:
- Select the Show caption checkbox.
- Select Save.
Enter the caption's text.
A space to add the caption will appear above the table. Enter your caption there.
Tip: After entering your caption, you can select its text and apply formatting such as making it bold or changing the font size.
Add column headers.
Select the text in the row that should serve as the headers for columns.
Pictured above is the complex table example: John's and Tomeko's Weekly Reading List. The text in the first row identifying the readers' names (John, Tomeko) is selected.
Open the Cell properties.
- From the editor's menu, select Table.
- Select Cell.
- Select Cell properties.
Change the Cell type to Header cell.
By default, the Cell type drop-down menu will have Cell selected. From this menu, select Header cell.
For the Scope, select Column. Then Save.
- By default, the Scope drop-down menu will have None selected. From this menu, select Column. Setting the Scope to Column will associate each selected cell as a column header with the cells below it. In the example of John's and Tomeko's Weekly Reading List, John will be associated with Game of Thrones, Ender's Game, and Farewell to Arms, so someone using a screen reader can know that those books were read by John.
- Select Save.
Note: In a more complex table, the same header may apply to multiple columns at once. If this is the case, you would select Column group for the Scope instead. For more information on using headers with groups of columns, see the W3C guide: Tables with Irregular Headers (opens new window).
View and edit headers if desired.
The text of the headers will appear in bold formatting and centered in column where it is located. With the text selected, you can apply formatting such as changing its alignment (e.g., left or right) or font size.
Add row headers.
Select the text in the column that should serve as the headers for rows.
Pictured above is the complex table example: John's and Tomeko's Weekly Reading List. The text in the first column identifying the weeks (Week 1, Week 2, Week 3) is selected.
Open the Cell properties.
- From the editor's menu, select Table.
- Select Cell.
- Select Cell properties.
Change the Cell type to Header cell.
By default, the Cell type drop-down menu will have Cell selected. From this menu, select Header cell.
For the Scope, select Row. Then Save.
- By default, the Scope drop-down menu will have None selected. From this menu, select Row. Setting the Scope to Row will associate each selected cell as a row header with the cells to its right. In the example of John's and Tomeko's Weekly Reading List, Week 1 will be associated with Game of Thrones and Crime and Punishment, so someone using a screen reader can know that those books were read in Week 1.
- Select Save.
Note: In a more complex table, the same header may apply to multiple rows at once. If this is the case, you would select Row group for the Scope instead. For more information on using headers with groups of rows, see the W3C guide: Tables with Irregular Headers (opens new window).
View and edit headers if desired.
The text of the headers will appear in bold formatting and centered in column where it is located. With the text selected, you can apply formatting such as changing its alignment (e.g., left or right) or font size.