For Screen Readers Only

Author: Phil Chambers | Feb 25, 2021 Screen Readers

When you design course content, it is sometimes useful to include some context for screen readers that is not relevant for those without them. Let’s look at how Canvas allows you to do this with a custom class.

What is this for? 

First of all, why would you want to hide elements from some learners and not from others? Well it all comes back to making the course accessible. Screen readers are helpful to visually impaired users as they will read the text that is displayed aloud. This applies to regular text, alternative text on images, and a lot more. Sometimes, however, I see certain elements or activites that would benefit from further text-based explanations or a message of some kind. The idea behind this would be to give someone using a screen reader some context or a further explanation on what to do in a heavily visual activity. For more information on this, you can check out the WebAIM article on Invisible Content Just for Screen Reader Users.

Using this in Canvas 

It’s actually a lot easier than you would think to add this sort of thing into a course page. Canvas uses the following class to hide elements from normal view: screenreader-only. You can use this class on a variety of elements, which gives all the more reason to make a course as accessible as possible by incorporating things like this! Here’s an example of how one would hide some text:

1. Locate an element that you believe relies heavily on visual context.
2. Write out a text-based explanation of the element either above it, or below (this will depend exactly on how your content is being used, and whether you want the screen reader to see the explanation first or after the element is displayed.)
3. Once the text explanation has been written, go into the HTML editor, and add in the screenreader-only class. Here is an example of how this would look:

<div id="image1">
<p>See the image below for a better explanation</p>
<img src="...">
<p class="screenreader-only">An explanation of the image for screen reader users: This image shows X, Y, and Z. The idea behind this is...</p>
</div>

Use in other elements 

This should also work in other elements like <span> <caption> (for tables) and <li> - the latter being useful if you want to hide a list item just for screen reader users.

That’s all there is to this one!