Skip to content
Accessible Technology

Tables in Canvas

Tables should be used for presenting rows and columns of data, not for layout, and column and row headers should be explicitly identified.

For an overview of this issue, see Tables in our IT Accessibility Checklist.

Techniques

To make tables accessible in a Canvas page, following the following two steps.

Step 1.  Identify the header row.

  1. In the Canvas page editor, click on (or arrow to) the table that you want to edit.
  2. From the menu bar in the rich content editor, select Table > Row > Row Properties.
  3. In the Row Properties dialog, select “Header” as the Row type.
  4. Save.

This has the effect of wrapping the header row in a <tbody> element in HTML.

Selecting the Row properities menu item from the rich content toolbar in Canvas

Selecting Header as Row type in the Row Properties dialog

Step 2.  Identify each individual header cell

  1. In the Canvas page editor, click on (or arrow to) a column header or row header.
  2. From the menu bar in the rich content editor, select Table > Cell > Cell Properties.
  3. In the Cell Properties dialog, select “Header” as the Cell type.
  4. In the same dialog, select “Column” or “Row” as the Scope. The dialog also provides “Column Group” and “Row Group” as options; select either of these options if the header cell spans multiple rows or columns.
  5. Save.

This has the effect of tagging the table cell as a <th> element in HTML, with a scope attribute.

Selecting the Cell properities menu item from the rich content toolbar in Canvas

Selecting Header as cell type and Column as scope in the Cell Properties dialog