Making tables accessible in Canvas can be easy if you set them up correctly! Using tables for layout purposes should be avoided. Use tables for displaying data only and use Headers and Scope. This is because assistive technology uses specialized controls when in a table.
Data tables should always include table headers (the <th> element). For short tables and for tables whose data are self-explanatory, column headers are sufficient. For long tables or tables where data may be confusing, it is best to include row and column headers. <th> elements should always have a scope attribute. Column headers should include scope=”col”, and row headers should include scope=”row”. Including scope attributes allow assistive technology to better understand the logical relationships presented in the table.
Use Table Captions
Tables can be given an accessible name with the <caption> element. Screen readers allow users to view a list of tables on the page. If the table has an accessible name, a screen reader will provide that name to the user. If not, the screen reader may only read the number of rows and columns. Thus, a <caption> provides substantial usability benefits, especially if there is more than one table on the page. <caption> elements are visible to sighted users as well.
Avoid Complex Tables
We recommend avoiding tables with multiple levels of row or column headers and headers that span multiple rows or columns. Such tables may be difficult to implement with the correct markup and scope attributes, and even if implemented correctly, may be difficult for users to understand. In most cases, some other presentation of the data, including presenting multiple tables, may be an equally effective alternative to a single, complex table.
Avoid Empty Cells for Formatting
Table authors may choose to use empty cells to visually format the table, such as to indicate a division in various sections of the table. While this practice may make sense for sighted users, it may not work for blind users. We recommend avoiding blank table cells, especially when those table cells are used for formatting.
Things to consider when making tables accessible in Canvas
- Avoid using tables for layout purposes
- Use simple tables
- Set table headers for both columns and rows
- Pay attention to the scope of headers
- Add a clear caption using the accessibility checker
Video Overview of how to make tables accessible in Canvas
Instructional Guide – How to make tables accessible in Canvas
Step 1: Ensure you are in edit mode
Step 2: Select inside the cell you want to make a heading
You can set both an individual cell or an entire row as a header at once
Step 3a – Setting an entire row: Select Table button in the rich content editor > Row > Row Properties
Step 4a – Change the row type from body to header
Step 3b – Setting an individual cell as a header cell: Select Table > Cell > Cell Properties
Step 4b – Change the cell type to Header Cell and set the scope to what is appropriate
Step 5: Run the accessibility checker found in the bottom right corner of the page
Step 6: Add the caption through the pop-up window
