Instructions for Creating Accessible Tables

How to Style your Table

Canvas provides a tutorial on inserting and styling tables. Links to an external site. Please do NOT add a background color to the table, as it is difficult to read. The following sample table uses a colored border, but not a colored background.

In the example below, the Cell Border is 2, Cell Padding is 5, and the Border color is IU's Crimson: #990000. (Note if you don't see the border, make sure you have added numbers into Cell Border and Cell Padding.) 

How to make your Table Screenreader-Friendly

To make your table headings visually appear as headings and also semantically read as headings to a screen reader, go to the HTML Editor, find your table and change the <td> and </td> on either side of your heading text to <th> and </th>.  That tells Canvas to make your table headers look like table headers and read like table headers to an assistive device. Make sure to leave the tags around your data set to <td> for table data so they are displayed correctly.

For example: 

FROM

<table style="border-color: #990000;" border="2" cellpadding="5">
<tbody>
<tr>
<td>Campus Learning Outcomes</td>
<td>Course Outcomes</td>
<td>How you will demonstrate this to your instructor</td>
</tr>

 TO

<table style="border-color: #990000;" border="2" cellpadding="5">
<tbody>
<tr>
<th>Campus Learning Outcomes</th>
<th>Course Outcomes</th>
<th>How you will demonstrate this to your instructor</th>
</tr>

A Warning

Tables are not to be used for design elements, such as creating a layout in Canvas. Using tables for formatting, as opposed to displaying tabular data, causes accessibility problems for students using screen readers. It also can "break" your Canvas page when students access it on certain devices.

If you have been using tables for layout, please visit your campus center for teaching and learning Links to an external site. to get ideas on other ways you can display your course content.

If you have no other way of displaying the information appropriately and need to use a table, go into the HTML editor and add role="presentation"  inside the <table> tag like this: <table role="presentation"> to make it somewhat more accessible.