Universal Design for Learning (UDL) is all about accessibility in teaching and learning. In my last blog post, I wrote about how to make your learning activities more UDL friendly. In this post, I’d like to focus on what you can do to make your online content in Canvas as accessible as possible for those who might have limited or no vision.
You might be thinking, “I don’t have any students with visual impairments so this doesn’t apply to me.” However, time and time again, accessible design has proven to be simply better design. Furthermore, many of these habits are also in line with basic web standards. So if you are building a web site for example, a more accessible web site is also going to be a web site that is primed for search engine optimization. Finally, and most importantly, if you do ever have a student who needs an accommodation, you will be prepared and not left scrambling to fix your Canvas course.
The good news is that making your Canvas course content accessible is very easy. Although I am focusing on Canvas in this post, these skills are easily transferred to other platforms such as WordPress or Microsoft Word.
Note: I’m assuming that you are familiar with editing text in Canvas. If you are not, you may find this overview video of the Rich Content Editor helpful, as well the Rich Content Editor section of the Canvas Instructor Guide.
Tag your headers as headers
Headers allow a sighted person to scan text, gather some basic information at a glance, and perhaps skip to a specific section. Header tags make this same type of behavior possible with a screen reader. Otherwise, a screen reader would just read an entire text from beginning to end without any organization mechanism. The key is that your text doesn’t just look like a header but is actually coded as header. If you simply adjust font size and make things bold, this does not mean anything to a screen reader. It might look like a header to a sighted reader but it will be recognized as just regular text. In HTML code, a header tag looks something like this:
<h1>This is the header</h1>
To tag a header as a header in Canvas, simply highlight the text and select an appropriate header from the drop-down menu in the Rich Content Editor:
Keep your header tags in numerical order
Header tags need to go in sequential order starting with Header 1. You cannot skip from a Header 1 tag to a Header 4 tag. Canvas might allow you to do this. However, if your page were to be run through an accessibility checker, it would be marked with an error. In Canvas, names of pages or assignments are always tagged as Header 1. That is why Header 1 is not an option in the drop down menu. Therefore your first header tag must be Header 2.
You may be tempted to choose header tags based on appearance. Don’t! Once you have the appropriate tag selected, you can then play with the formatting to change the font size or make it bold, underlined, or italicized. Just make sure that the format of the text is Header and not Paragraph. If you are in edit mode in Canvas and you click into or highlight the text, it will display the format in the drop down menu as in the image below:
At the bottom of the editing window, you will also see an HTML tag that is being used. In the image above, an
<h2> tag appears to correspond with the Header 2 (as opposed to
<p> which would indicate Paragraph, or normal text).
Include Alt Text for Images
Images can provide helpful information to a reader. For those who cannot view the images, it’s important to provide some alternative text (or Alt text) to give the reader an idea of what they cannot see. Once you have your image on your Canvas Page (or any other area where the Rich Content Editor appears), select the image by clicking on it with your mouse. Then, click on the Image icon in the toolbar:
After clicking on the icon, the following pop up should appear:
Type in the Alt text for your image (by default, the file name will appear there). Then, click Update.
For additional information on how to write good Alt text, check out the Alternative Text section on the WebAIM website. If you are using an image for decorative purposes, you can include blank quotation marks (
"") in place of Alt text. This will tell the screen reader to skip over the image.
Use Descriptive Language for Hyperlinks
When a screen reader hits a hyperlink, it notifies the reader that the text is a hyperlink and then reads the name of the link. It’s always best for the visible text of the hyperlink to be descriptive rather than the exact web address. For example, if I wanted to reference ITG’s website, I would write it and link to it as follows: the Instructional Technology Group’s website (instead of http://www.emerson.edu/itg). The reader can still access the exact address if need be but does not have to wait for the entire address to be read. Also, if the link ever broke, the reader would have more contextual information to work off of should they need to find the website on their own. Check out WebAIM’s section on Links and Hypertext for additional information.
Another type of formatting option that you might use is the bulleted or numbered list. These tags appear as follows in the Canvas Rich Text Editor:
I would encourage you to use these tags when it makes sense, rather than listing things without any tags. Perhaps you weren’t thinking of your text as a list, but if you’re describing a series of steps or perhaps have a list of definitions or names, why not tag it as a list? It’s going to make your text look more organized visually and will provide another way for a screen reader to make sense of your text.
Go Easy with Colors and Graphics
Color might not make a difference to a screen reader but for someone with limited vision, color contrast is important. You are going to get the best contrast using black text on a white background. You should also avoid associating the color of text with meaning since you may have students who are color blind. Finally, definitely stay away from any graphics that may be seizure inducing. When it comes to UDL and web design, clean and simple is key.
As you can see, all of these tips are fairly easy to incorporate. Perhaps you have used them before for aesthetic purposes. Now that you understand a little bit more about why they’re important, I hope that you will incorporate them more thoughtfully as you create content in Canvas. As always, feel free to reach out to us if you need help with the above steps.
Interested in learning more about accessibility? Check out the following Lynda.com resources:
- Accessibility for WordPress
- Creating Accessible Documents with Microsoft Office
- Creating Accessible PDF’s