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