Introduction

The LMS Canvas by Instructure comes with a decent set of styled elements to start with, but diving into the HTML editor is where you can really modify content, giving it a specific look and feel. Recently I have found that I am going to these customized elements more often to help achieve learning outcomes and provide a different look and feel for accessible course pages.

It is not limitless, however, or even as open as regular web development would be. Canvas has an HTML Editor Allowlist for elements, styles and classes (though some absent from this list will work if you give it a go!). Many of these are activated by using in-line class or style, but other attributes are also available.

Without further ado, here are three of the more popular elements I have been drawn to when creating courses over the past few terms.

Accessible Rich Internet Applications (ARIA)

Defined as

a set of attributes that define ways to make web content and web applications more accessible to people with disabilities
Source

These attributes are some of the most popular because they help with accessibility (particularly, screen readers) on the course site. Where native HTML5 elements are not available, these ARIA attributes help to explain what a particular piece of content does and how a learner should interact with it. By using these, we help to make courses open to a wider set of learners.

See the Canvas HTML Editor Allowlist for a full list of supported ARIA attributes.

Example 1: Element Togglers

You want to include an element on your course site that expands to reveal more content. You will need to make a screen reader aware that the content is there, and what it does. Using the following should get you off to a good start:

<span class="element_toggler" role="button" aria-controls="something" 
aria-label="longer description of the element" aria-expanded="false">
Click here to see the explanation</span>

<div id="something" style="display: none;">
The explanation.
</div>

aria-controls="something"

combines with id="something" later on in the code. The value must match the id value for it to work correctly. This is used to interact with the element.

aria-label="longer description of the element"

used to describe the functionality of the element if it is not explained prior to the interaction.

aria-expanded="false

used to tell the screen reader the button is initially closed.

Example 2: Descriptions

You have a particularly visual element on the page, and you want to write a larger piece of text for a screen reader to explain this. You can use aria-describedby and then link it to the id of an element (in the <span> below):

<p><img src="close_up.jpg" aria-describedby="close_up">
<br>
<span id="close_up">A close-up view of the rock target named "Máaz" from the SuperCam 
instrument on NASA's Perseverance Mars rover.</span> 
Analysis of SuperCam data shows that Máaz has a basaltic composition. 
It is either an igneous rock or consists of fine grains of igneous material 
that were cemented together in a watery environment.<br>
Full image and caption from 
<a href="https://www.jpl.nasa.gov/images/supercam-close-up-of-maaz">
NASA Jet Propulsion Labratory.</a> NASA/JPL-Caltech/LANL/CNES/CNRS
</p>

Device specific content

Next up, is hidden content. So you added the element_toggler above, but your learners with the Canvas Mobile App let you know they cannot click it!

Some of the projects I work on with these elements require an entirely different way of accessing the content on a mobile device.

A potential fix

Create different versions of the content by hiding each one depending on the device.

To do this, you will need to divide the content using two containers. Using the same element_toggler code from above, we can easily add a separate, but hidden part underneath for Canvas app users.

<span class="element_toggler" role="button" aria-controls="something" 
aria-label="longer description of the element" aria-expanded="false">
View the explanation</span>

<div id="something" style="display: none;">
The explanation.
</div>

<div class="hidden-desktop hidden-tablet hidden-phone">
The explanation.
</div>

The addition of the class="hidden-desktop hidden-tablet hidden-phone" attributes will hide this container for most users. As it is sitting outside of the element toggler, however, mobile app users do not need to click the element toggler to see the explanation! This provides a more accessible option for users of those devices.

Note: if you have access to the stylesheet for your institution, it would be more beneficial to add these changes there than on a per-page basis.

Anchoring to part of a page

If you have ever seen text content that says something similar to this…

As we discussed before…

As I mentioned previously…

Back in Module 3, we talked about…

…then you need to use this simple feature of the anchor element!

I use this a lot on course content that requires students to refer to previous material. Everyone will have heard of a hyperlink using the <a> tag, but you can also use this anchor to link to a certain part of the page. I regularly use it to send learners to particular headings or content that they would find relevant for assignments. If you set up your course from the start with this in mind, it can be a fast way to group revision material from certain parts of a page, or create more accessible navigation menus.

Give an element an id, like this:

<h3 id="section_2">Section 2</h3>

Then, when you want to send a learner back to that part of the page, just reference it by adding the id to the end of the page link with a `#`. For example:

<a href="https://yoursite/page#section_2">Section 2</a>

This will take the learner directly to the heading with the id of ‘section_2’, which you set up before.

You can even do this within the same page to jump to that part of the page. Just link it like this without the rest of the URL.

<a href="#section_2”>Section 2</a>

Conclusion

These are a sample of the elements, classes, and styles I have used to enhance content over the last few terms. With each, accessibility has been a must, which requires a bit of reflection on how learners would interact with the content. There are a lot more available, and you have a list in the Canvas HTML Editor Allowlist to start experimenting. By thinking of accessibility from the early stages of course design, more users can appreciate these page elements and content.

References

1. The Canvas Style Allowlist: [http://bit.ly/cnvs-allowlist]
2. “ARIA” from MDN Web Docs/Mozilla [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA]