Table Accessibility in Canvas

snugent
Community Champion
5
10583

In the rich content editor you can add tables in a similarly way that you do in Word; however, the table you create doesn't automatically add a caption and header row/column to the table. You need to add these to the table manually.  The following guide details how to use the table feature in the rich content editor. 

Generally speaking tables should only be used for tabular data. If you do use tables for design, make sure the content will make sense when read from left to right in each row of the table. When used for tabular data, it is important to add this information to your table so it can be easily read by people who use screen readers.  In some cases your table may need a header row and column. This will be dependent on the data you are presenting in your content. The tutorial below show you how to complete these steps in the editor. 

Step 1: Add a Caption to a Table

The first step to making your table more accessible is to add a caption. (1) Select the table until you see the blue handles at the each corner. (2) Click the Table icon in the toolbar and select table properties.

Figure 1: Selecting a table and highlighting the table icon in the toolbarFigure 1: Selecting a table and highlighting the table icon in the toolbar

In the table properties dialog box there are two tasks to complete. (3) Next to Width enter a percentage for the width. This will allow the table to resize when the page is resized. You will also need to set percentage for each cell as well. This will be complete in step 2.  (4) Next to caption option,  place a check mark in the box. (5) Click OK

Figure 2: The table dialog boxFigure 2: The table dialog box

In the editor you will see extra space above the table. (6) Enter your caption text here. 

Figure 3: The table caption highlightedFigure 3: The table caption highlighted

Step 2: How to Header Rows/Columns to the Table

In this example the table has a header row and column.  Use the tutorial below for step by step instructions on how to add header row/column and caption. Create the table as normal. (1) Select the first row of your table. (2) Click the table icon in the toolbar and select Row > Row Properties.  

Figure 4: Table row selected in the rich content editor with table icon highlightedFigure 4: Table row selected in the rich content editor with table icon highlighted

In the row properties dialog box (3)  next to row type select Header. (4) Click Save

Figure 5: The row properties dialog boxFigure 5: The row properties dialog box 

(5) With the first row still selected, (6) click the table option in the toolbar again and select Cell > Cell Properties

Figure 6: Table with row select and table icon highlightedFigure 6: Table with row select and table icon highlighted

In the cell properties dialog box, (7) enter a desired percentage for the cell width. Note: You may wish to adjust the cell width for cells individually depending on your content.  (8) Next to cell type select Header cell. (9) Click Save. Be sure to save the page once complete. 

Figure 7: Cell Properties dialog boxFigure 7: Cell Properties dialog box

Once you have completed these steps your table will be more accessible for all your students. 

5 Comments
Boekenoogen
Community Contributor

This is a nice update. 

Bobby2
Community Champion

This is going to be helpful for a few people thanks snugent

kona
Community Coach
Community Coach

Great resource! Thank you for sharing!

dejonghed07
Community Champion

Thank you! I just used your steps to create an accessible Grading Scale for the Syllabus page. Nice! I'll copy the code below the table in case anyone wants to use/modify it. 

Grading Scale
GradePercentageTotal Point Range
A93-100930-1000
A-90-92900-920
B+88-89880-890
B83-87830-870
B-80-82800-820
C+78-79780-790
C73-77730-770
C-70-72700-720
D+68-69680-690
D63-67630-670
D-60-62600-620
E<60<600

<table style="width: 50%; border-collapse: collapse;" border="1"><caption>Grading Scale</caption>
<thead>
<tr style="height: 24px;">
<th style="width: 33.3333%; height: 24px;"><strong>Grade</strong></th>
<th style="width: 33.3333%; height: 24px;"><strong>Percentage</strong></th>
<th style="width: 33.3333%; height: 24px;"><strong>Total Point Range</strong></th>
</tr>
</thead>
<tbody>
<tr style="height: 24px;">
<td style="width: 33.3333%; text-align: center; height: 24px;">A</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">93-100</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">930-1000</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">A-</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">90-92</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">900-920</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">B+</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">88-89</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">880-890</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">B</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">83-87</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">830-870</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">B-</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">80-82</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">800-820</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">C+</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">78-79</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">780-790</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">C</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">73-77</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">730-770</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; height: 24px; text-align: center;">C-</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">70-72</td>
<td style="width: 33.3333%; height: 24px; text-align: center;">700-720</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; text-align: center; height: 24px;">D+</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">68-69</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">680-690</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; text-align: center; height: 24px;">D</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">63-67</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">630-670</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; text-align: center; height: 24px;">D-</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">60-62</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">600-620</td>
</tr>
<tr style="height: 24px;">
<td style="width: 33.3333%; text-align: center; height: 24px;">E</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">&lt;60</td>
<td style="width: 33.3333%; text-align: center; height: 24px;">&lt;600</td>
</tr>
</tbody>
</table>

kristi_oneilgon
Community Participant

Is there any idea when this guide will be updated to reflect the new RCE?