Tables

Common mistakes
How to create an accessible table
General rules
Accessibility Checker
Additional resources

Purpose of Accessible 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 a ubiquitous part of teaching.

The x and y-axis of a table - usually the top row and the left column, are visual markers that help sighted users navigate, and that provides important context to the information in the respective cells. 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 and to provide context to the data in the cells.

Denoting a header row and column (when appropriate) are required elements, but there is one more optional element we'd like you to know about, as well. Canvas allows you to include a label or caption with each table. This is a brief descriptive statement that allows the user to quickly assess the content of the table. It's good practice to add a caption as this provides an overview of what the table is about.

Common mistakes

Is the cell type a regular data cell or is it a header cell?

Well-intentioned instructors often fail to tag the header row or header column 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. Tagging the header column and row is really important. Imagine trying to navigate a table with the header row and columns missing or hidden!

What is the Scope?

Don't forget to let students know if the header cell is a header row cell or header column cell. After defining the cell type as a header cell, define the scope as either "Row" or "Column"

No empty cells!

When screen readers interpret an empty cell it will read aloud, "blank." This is not very helpful for students and may cause confusion. Add content in each cell and consider apply additional formatting to create a readable table.

Review Table Anatomy for a quick review of the various parts of a table.

How to create an accessible table

There are three things you need to create an accessible table:

table header (usually column or row titles)
scope (row or column)
caption (brief table summary)

Watch CVC-@ONE's Byte sized Canvas about Making Your Tables Accessible.

Note: this video uses the "Row Properties" method to creating table headers and relies on the Check Accessibility tool to determine the scope. Lately, the Check Accessibility tool has been a bit buggy. If you choose to use the Check Accessibility tool to review the page accessibility, please manually check your work as well immediately afterward. There are reports stating that all manual table accessibility efforts were deleted.

Note: the tutorial begins at 1:27

Step 1: Insert table

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

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.

Step 2: Highlight table header

Highlight the designated table header row, with your cursor still in the upper left corner, select the table icon.

The top row, "Monday, Tuesday, and Wednesday" should now be highlighted blue.

Note: this example is a table header row

Step 3: Use cell properties to create your table header

Next, tag your header row so the screen reader will be able to identify the header.

Select in the RCE Table icon > Cell> Cell properties from the drop-down menu.

Step 4: Select "Header cell"

The Cell properties window will appear. Under General tab > select Header cell

Step 5: Define the scope of the table header cells - are they row or column headers?

Under Scope > select either Row or Column > select Ok.

If you need help determining which to choose review Table Anatomy.

Remember (checked box)

Have a column header cells? Highlight the column and follow Step 5 above. Then choose Column.

Now you have an accessible table!

Remember (checked box) In Canvas, there are two ways to create table headers. You can either use:

Table icon > Row > Row properties
Table icon > Cell> Cell properties

Cell Properties is a faster way to apply table headers as you can edit the cell type and scope simultaneously. Also, the table headers are automatically bold, which helps with readability.

Step 6: Add a caption

Briefly describe why this table is important in a caption.

First, highlight your table by selecting anywhere in the table. A table is highlighted when you can see four white squares at each of the table's four corners.

Next, select Table icon > Table Properties.

The Table Properties window will appear. Under General > check Caption.

Finally, a space above your table headers will appear. Write a brief and descriptive summary of the table.

Great job!

General rules

Apply a header on your table
Define the scope of each cell as "header cell"
Define each header cell as "row" or "column"
Add a caption
Avoid leaving any cells empty as students who rely on screen readers will become confused as the cell will read aloud "Blank." Try adding content to make it clear to students and use cell color to help differentiate content for readability

Accessibility Checker

The table features in the Canvas Check Accessibility tool are, perhaps, the best feature of this tool. Once your table is in place, you can use the accessibility tool to quickly insert a table caption and denote your header column and row.

To use the tool:

Insert your table and enter the data into all cells, including the column and row headers
Select the Check Accessibility tool
The accessibility pane will open and prompt you to provide a caption for the table, and denote your column header, and, when appropriate, a row header
Save your page

Tip Note: The Canvas Accessibility Checker tool has been acting a bit buggy as of late. Some institutions have experienced the Accessibility Checker undoing all table accessibility applications. We recommend creating an accessible table and manually checking if it is accessible for now until Canvas updates.