Building Accessible Content in Canvas and Beyond

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:

screenshot of format dropdown 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:

screenshot of a header highlighted in Canvas in the Rich Content Editor and a Header 2 tag appearing from the Format dropdown menu

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:

screenshot of the Canvas image icon in the Rich Content Editor toolbar

After clicking on the icon, the following pop up should appear:

screenshot of pop up window in Canvas where alt text can be entered

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.

Tag Lists

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:

screenshot Rich Content Editor toolbar with unordered and numbered list icons highlighted

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:

 

Median User Testing April 6th and 7th

""

Emerson College is looking for a video streaming service to replace Median. Help us choose the best option while enjoying some tasty treats! Participants can enter to win a high-end wireless headset and portable stereo speaker.

 

Thursday April 6th from 10am-4pm in the Library Electronic Classroom

AND

Friday April 7th from 10am-4pm in Walker 418

 

What can I win for user testing?

A JBL Flip 4 Wireless Portable Stereo Speaker:
""

A Jabra MOVE Wireless Bluetooth Headphones:

""

Why get rid of Median?

We debuted Median in 2008 because there were no products available that did exactly what Emerson needed. At this point, the market for educational video streaming has matured and there are many good solutions available.

When is this happening?

Median will still be up and running through Summer 2017. We hope to have new uploads using the new system at that point while still keeping Median running.

When are you turning Median off?

No decisions have been made about that yet.

What happens to all my stuff?

We don’t yet know what the exact process will be for migrating content – it will depend on the system the community chooses. We will make information available as soon as we can!

Who will help me, and when?

ITG and IT will be running all sorts of trainings, as well as helping faculty one on one. Again, stay tuned for details!

What will I like about a new system?

Our hopes for a new system include:

  • Easier and more reliable uploads from anywhere
  • In-depth analytics that include how and from where your audience is engaging with your content
  • Ability to record screencasts
  • Improved branding, like the ability to choose your own thumbnail
  • Integration with Canvas

Reaching all types of learners with UDL

You may have heard the term UDL buzzing around lately in your education circles. It stands for Universal Design for Learning and is a guiding tenet for us here in ITG. The term Universal Design originated in the world of architecture. It emphasizes designing to accommodate everyone from the start, rather than making adjustments after something has been built. This not only saves a great deal of effort but also leads to cleaner, more visually appealing designs.

In the world of education, UDL has become synonymous with accessibility for learners with visual or hearing impairments (e.g. closed captioning for videos, optimized text in PDF’s, etc). But UDL is so much more than that! Rather than designing for the average learner, UDL encourages us to design for “the margins” using a framework based on neuroscience. According to UDL, good teaching provides the following:

  • multiple means of representation: present information in different ways to target the recognition networks of the brain
  • multiple means of action & expression: provide different ways for students to express what they know to target the strategic networks of the brain;
  • multiple means of engagement: stimulate interest and motivation for learning to target the affective networks of the brain

You can learn more about the UDL framework and the neuroscience research behind it at National Center for Universal Design for Learning’s website.

ITG and UDL

Interested in incorporating the UDL principles into your teaching? Here are some ways that Emerson-supported technology can help you do just that…

Multiple Means of Representation

In addition to readings and lecture, you can…

Multiple Means of Action & Expression

In addition to papers or exams, you can…

  • Have students keep a blog or create a website using WordPress.
  • Use Canvas Discussions to have students analyze a topic or reading. Take it a step further and have students lead the discussions!
  • Input assignment due dates as well as other important dates into the Canvas Calendar to help students manage their time and build their executive functioning skills.
  • Take advantage of Google Drive. Students can create websites with Google Sites; input, analyze, and represent data with Google Forms and Google Sheets;  create presentations with Google Slides; and so much more!
  • Incorporate polls into your class using the Polls for Canvas app.

Multiple Means of Engagement

In addition to office hours, you can…

  • Get to know your students using Canvas Discussions. Have them introduce themselves and share their interests. You could also use Google Forms to survey them.
  • Give your students different options for required work using the various submission options in Canvas Assignments.
  • Get students working on team projects with Canvas Groups.
  • Provide ongoing feedback and encouragement for students via the Canvas SpeedGrader. Make it more personal with audio or video comments.

These are just a few ideas. Schedule a consultation with ITG if you would like to brainstorm additional ways to incorporate UDL into your courses. We can also train you on how to use any of the tools mentioned above.

Canvas’ Rich Content Editor and you

The Rich Content Editor in Canvas opens whenever you’re creating new content or editing existing content. It gives you a powerful set of tools upfront to help you make your Pages, Assignments, Discussion posts, and more engaging for your students. Besides the built-in options that you see when the editor first opens, there are several hidden ways to do even more with your content.

Keyboard shortcuts & the menu bar

Tucked at the bottom of Canvas’ documentation on the Rich Content Editor is information about a few keyboard shortcuts that can help make the editor more accessible.

While you have the editor open, click into the area where you type your content so that you can see the cursor blinking. Then,

  • press ALT + F8 (PC) or ALT + FN + F8 (Mac) to display a “Keyboard Shortcuts” popup with info about what other shortcuts you can use.
  • press ALT + F10 (PC) or ALT + FN + F10 (Mac) to put the focus in the editor’s toolbar, which will allow you to navigate the buttons using the arrow keys on your keyboard.
  • press ALT + F9 (PC) or ALT + FN + F9 (Mac) to unhide the editor’s menu bar.

That last one is important since it gives additional functions such as formatting text with a strikethrough, Undo/Redo buttons, the ability to paste without formatting, and wiping out all the content to start with a blank document.

Screenshot of the editor’s menu bar, with the “Edit” menu opened to show options for Undo, Copy, Paste and more.

HTML Whitelist

When you have the Rich Content Editor open, you can click on the “HTML Editor” link to open up the html view of your content. This allows you to fine-tune settings and styles on your content, such as forcing links to open in a new page by adding the target=”_blank” property to them or using media embed code from another site.

It’s important to note here that not all HTML elements will be accepted by the editor. Script tags and form elements (i.e., input tags) are examples of tags that will be stripped out when you attempt to save your content. To view the complete list of allowed html tags and properties, click here to access the Canvas HTML Editor Whitelist (PDF).

This is also true if a student is pasting text into an assignment for submission. For assignments where students are submitting blocks of html code, the best thing to do is have them save their work as an .html file and upload that to the assignment. The submissions will still preview in the Speedgrader and all of the formatting will be preserved.