Most of the content in a course that is hosted on the Canvas LMS, including Announcements, Assignments, Discussion, Pages, Quizzes, and Syllabus can all be edited using Canvas’ Rich Content Editor, an editor with a Microsoft Word-like interface which converts the editor’s content into HTML. The editor allows you to add most things that you would expect, including headings, images, links, etc. However, one feature that is notably absent in the Rich Content Editor is the ability to lay out your content in multiple columns for visual interest.

Perhaps the folks at Canvas figure that most course designers will be happy laying out their page content in a single column, and so have not invested the time in adding a multi-column layout tool to the Rich Text Editor. However, from my personal experience with course designers at CNDLS, and from browsing the Internet, it does appear that several other Canvas users like to add multi-column layouts to their course content. It appears that the official response from Canvas on how to do multi-column layout was to use the HTML Editor tab of the Rich Content Editor, and manually add HTML classes from the Instructure styleguide which trigger CSS that implements a flexbox grid. Canvas also appears to be moving to a better Rich Content Editor experience in the future, although it is not clear from that blog post what the release date will be.

As things currently stand, most Canvas content editors who are not well-versed in HTML and CSS resort to using the Table button of the Rich Content Editor to lay out content in multiple columns. However, this is not an ideal situation from an accessibility standpoint, because the semantics or meaning of the HTML <table> element is tabular data, and so typically screen readers (text-to-speech software that reads the content of web pages aloud to visually impaired users) will read the row and column numbers of tables. I have therefore discourage Canvas content editors in the past from using tables to layout out non-tabular data.

However, in the following Youtube video, I recently tried perusing a page in a Canvas course that had used a table for layout with the Voiceover screen reader that is built into Mac OS, and it turned out that when the table had no table headers and no caption, Voiceover did not treat the table as a table, and therefore did not read the row and column information, which is the experience that we would want for screen reader users. In addition, I show in the video how the HTML attribute role=”presentation” can be used on any table to remove table semantics, if in fact you are using a table for presentation purposes, and not to display data.

In conclusion, although the behavior of different screen readers may vary (for Jaws on Windows, for example), it appears that it does not compromise screen reader experience to use a table for layout in Canvas, as long as the table does not include a caption or headers. To be completely safe, content editors should use role=”presentation” to ensure that layout tables are not treated as data tables by screen readers.

A transcript of the video is also available below.

so this is just a quick demo of how the voiceover screen reader with the Safari
00:05
browser will announce will read tables that are used in the canvas LMS for page
00:14
layout so you see here I have a home page in canvas with a graphic and then
00:22
an HTML table that is being used to create a two column layout so let me
00:27
demonstrate what that sounds like with the voice-over screen reader Voiceover: “voiceover
00:35
on Zoom.us”
00:38
sure I switched to the correct application
00:42
Voiceover: “Safari home page headings menu heading level 1 home page”
00:46
I’m at the main content area.
00:49
Voiceover: “circle with the words and vision” Brian: graphic.
00:57
Voiceover: visited link. Canvas accessibility concepts and demonstration link canvas accessibility learning
01:02
resources and instructions link canvas accessibility exercises. Brian: so you can tell
01:13
that the table is actually is doing (Voiceover reads something unexpectedly in the background) is not actually announced by the screen
01:20
reader which is actually what we want so it’s kind of counterintuitive but that’s
01:26
good news because it’s it’s not giving extra row and column data that we don’t
01:30
want because we’re using the table as presentation not as a data table as it
01:35
was originally intended to be used so let me close the screen reader here
01:38
Voiceover: voiceover off. Brian: and then if we look at the HTML or the rich text editor we see that
01:50
this is a table because it has the dotted outline and a key thing to notice
01:57
is the images here I click on image I have checked a decorative image checkbox
02:03
and that is why the screen reader skips that image which is exactly what we want
02:08
because they’re really just decorative icons
02:13
if I go into the HTML editor actually let’s not do that if I just look at the
02:20
the area here in the lower left corner where you see the HTML that’s being
02:26
listed it’ll tell you the HTML that’s the rich text editor is generating so
02:35
you see here it’s a table and it goes right into the table body and there is a
02:42
table row so TR stands for and TD stands for table data cell so we have / are using a
02:49
very bare-bones table which just the with just the body and
02:53
the data cells and that’s why the screen reader is not announcing it as a table
02:58
because it doesn’t have headings and it doesn’t have a caption if we were to add
03:03
those elements into our table the screen reader would announce it as a table and
03:07
you see if I run the check accessibility check the built into canvas it does
03:14
complain that the table doesn’t have a caption it doesn’t have a header because
03:19
if you were to be using this as a table you should definitely have those
03:25
elements in but since we’re just using it for presentational purposes we’re
03:31
just gonna skip those because they would actually make the screen reader announce it as
03:35
a table so just to show you what a table… uh a data
03:40
table with all the required elements sounds like with a screen reader you can
03:45
see that I’ve added in this data table that I’ve got from the Mozilla developer
03:50
Network example but it’s about the planets so let me save this or one thing
03:56
I will I will first note is that if I click on this top part you see it says
04:01
table caption so this is the caption of the table which is basically at the
04:04
title what the table is about and if I click on the first row it says table > thead
04:10
and then th for table header cell and then thead is the table
04:16
headers section so because these elements are present on the table the
04:22
screen reader will recognize it as a table and will read the table
04:25
information so demonstrate what that sounds like. save
04:28
it, fire up voiceover. Voiceover: link… data
04:43
about the planets of our solar system planetary facts taken from NASA’s
04:46
planetary factsheet metric table 12 columns 10 rows. Brian: so it reads the caption
04:51
it says that it’s a table, and it says the number of rows and columns. Voiceover: name. Column 3 of 12
04:58
Brian: And it reads through the column headers.
05:03
Voiceover: Mass 1024 kg column 4 of 12 Brian: if I go down into a cell… Voiceover: Row 2 of 10 terrestrial planets
05:09
mercury zero point 330. Brian: it reads the data in the cell and the row heading the
05:16
row header for that cell so that’s exactly what we would expect so to
05:21
summarize if you’re gonna use a table for presentational purposes in canvas do
05:28
not add a header do not add a caption and and the screen readers should not
05:37
talk about the rows and columns of the table and it should just be a pleasant
05:40
experience for a screen reader user if however you do want to use a table as a
05:44
data table make sure to add the row headers potentially the col… sorry
05:52
the column headings potentially the row headings and a caption to describe what
05:56
the table is doing one final trick to show you
06:00
Voiceover: voiceover off. If you add an attribute to any table in the HTML so I’m gonna find
06:15
that planet table in the HTML and I’m looking for the table tag here it is the
06:20
opening table tag I add the attribute: role=”presentation”
06:28
and I save that that is telling the screen reader that this
06:36
table shouldn’t be thought of as a table but only as a
06:39
presentational element for display purposes so now when I use the screen
06:43
reader here we won’t get any of that column and row heading information we
06:47
will just it’ll just read the text that’s in the table so let’s see what
06:50
that sounds like. Voiceover: heading heading a circle this link link. Data about the
07:00
planets of our solar system planetary facts taken from link NASA’s
07:05
planetary fact sheet metric period name mass 1024 kg diameter kilometers
07:15
four thousand eight hundred seventy nine 5427
07:21
3.7. Brian: you can see there it’s just the text it’s not giving any additional table
07:28
information I also just noticed that I can’t navigate up and down the table
07:32
using the screen reader anymore so be careful when using tables presentational
07:40
tables note that a screen reader user will only be able to navigate
07:45
sequentially through the cells if it’s a presentational table and that’s my
07:52
demonstration! Voiceover: voiceover off Brian: turn off the screen reader and stop the
07:59
recording thank you for watching