Creating Accessible Tables in Canvas

Purpose of Tables

Some disciplines use tables routinely, so learning how to do them correctly is essential. Most instructors use tables routinely to create unit To-Do lists, to provide information about due dates or readings, or to provide a chart for grading. Tables are an ubiquitous part of teaching.

That said, the x and y-axis of a table--usually the top row and the left column, are visual markers that help sighted users navigate. Just as we need to tag headings so that students using screen readers can more easily scan and navigate a page, we need to tag our tables to assist in navigation.

Common Errors

Well-intentioned instructors often fail to tag the header row in tables, or give an earnest attempt, but use the wrong format. Simply choosing to make the titles in the header row bold will not make the table accessible.

Example of Poor Table Structure

A table with bold text in the first row but no proper header markup:

Assignment	Due Date	Points
Discussion 1	September 15	10
Quiz 1	September 20	25

Example of Good Table Structure

A table with proper header markup (th tags) in the first row:

Assignment	Due Date	Points
Discussion 1	September 15	10
Quiz 1	September 20	25

How to Create a Table with a Labeled Header Row

To insert a table into your content page, select the Table icon from the editing bar. From the drop-down menu, select insert table, and then select the number of cells across and cells down you will need.

Your table template will appear, but it is not yet formatted! You can begin entering your data, and then format the table, or you can format the table and then enter your data.

When you're ready to format, put your cursor in the top left-hand cell, then select the table icon from the editing menu.

First, select Table Properties. When the editing box appears, set the width and height, if you have constraints (though it is okay to leave this blank).
Next, set the cell spacing (the distance between cells), and the cell padding (the white space within the cell between the border and the information in the cell).
Finally, set a border. Though some tables don't need borders, large tables or tables with full cells will need borders to help students keep track of their location within the table.
When you're done setting these properties, select OK. You may want to play around with the padding, spacing, and border until the ratio is right for your information.
Next, tag your header row so the screen reader will be able to identify the header. With your cursor still in the upper left corner, select the table icon, and then choose Row, and Row Properties from the drop-down menu. For row type, choose "Header".

Best Practices for Accessible Tables

Always include header rows for data tables
Keep tables simple - avoid merged cells when possible
Add a caption to describe the table's purpose
Use adequate spacing between cells for readability
Ensure sufficient contrast between text and background colors
Avoid using tables for layout purposes - use them only for tabular data

Additional Resources

How do I insert a table using the Rich Content Editor? - Canvas Guide
WebAIM: Creating Accessible Tables - Comprehensive guide to table accessibility

Click on the Next button below to continue on in this module.