Photo by rivage on Unsplash
5. Tables
Tables are often used in Canvas courses to organise information such as timetables and assignments.
A well-constructed table involves defining header cells and the cell scope. This allows screen reader software to read aloud the headings by column, and the data by rows, therefore giving the data a meaningful structure.
The general rule is to only use tables for tabular data, rather than page layout. Consider using Canvas Design Blocks as an alternative tool for designing layout.
DO
Use tables for tabular data
A table with three columns, a header row and three data rows.
DON’T
Use tables for layout
A table with two columns. In the left hand column is a lecturer’s name, role, and faculty, and in the right hand column is their profile image.
Fixing issues with UDOIT
Problem 1: No table headers found
Meaning
Table headers provide a description of the table structure. Tables without properly identified header cells can be hard to interpret and navigate for students who rely on screen readers.
How to fix it
In UDOIT Advantage, click the Review button for more information. Select the header option (column header, row header or both) for your table and click save.
Select table direction to set headers. Options are column header, row header, or both.
Problem 2: No row or column scope declarations found in table headers
Meaning
Table headings have no defined scope attribute. Adding a scope helps screen readers determine whether the headers are for rows or columns.
How to fix it
In UDOIT Advantage, click the Review button for more information. Select the option that defines the scope for your table headers and click save.
Select the scope for table headers in UDOIT. Options are column header, row header, or both.
Problem 3: “Pre” elements should not be used for tabular data
Meaning
Using <pre> elements in HTML preserves the layout and spacing (including tabs), which allows for ‘content that looks like a table’. However, screen readers and browsers perceive this as text rather than structured data. Creating a properly formatted table in Canvas indicates header cells and data cells and defines their relationship.
How to fix it
This issue cannot be resolved in the UDOIT tool. Edit the Canvas page, create a new table and copy the data in to the table.
Problem 4: Table without content detected
Meaning
The UDOIT tool has found an empty table.
How to fix it
This problem cannot be resolved in UDOIT. Edit the page in Canvas and populate the table with data or delete the table.
Getting it right in Canvas
Canvas table cell properties
In the Canvas rich content editor, follow the menu Table > Cell and click on Cell properties.
Canvas’ table menu in the rich text editor. Table cell properties is selected.
Setting cell headers
Highlight the cells in the table which contain headers. Then follow the instructions above to open the Cell properties.
Under Cell type, select Header cell then continue to set the scope of the headers or click Save.
Setting Canvas table cell type via the table cell properties menu in the rich text editor. Options are cell or header cell.
Highlight the cells in the table which contain headers. Then follow the instructions above to open the Cell properties.
Under Cell type, select Header cell then continue to set the scope of the headers or click Save.
Setting cell scope
Setting the scope of table headers assists screen readers determine the direction of the table.
The scope is set in Cell properties. The options include Row – for headers of a single row, Column – for headers of a single column, Row group – for headers of multiple rows and Column group – for headers of multiple columns.
Setting Canvas table cell scope via the table cell properties menu in the rich text editor. Options are row, column, row group or column group.
Page updated 23/08/2024 (design blocks link update)