Emerson IT Help Desk

Creating Accessible Content on Canvas

How can I make my Canvas site accessible?

While Canvas is ahead of other learning management systems when it comes to accessiblilty, part of ensuring a platform is as accessible as possible takes place during the content creation. So, while Canvas itself is 508-compliant, with homogenous color schemes across the board, clean designs, tab-naviagable menus - if a user takes the time to follow their example - clear design in creating Canvas pages, modules, and so on - then both platform and created content will be accessible. At the end of the day, though - what this really means is getting into the habit of generating alternate text. 

Alternate text is one of the more important aspects of accessibility, yet is often overlooked. Tags on images - called alternate text, alt text, or alt text tags - are ways for a screenreader to interpert that image for a user. Without "alt" text on an image, a screenreader cannot do its a job fully. In all likelihood, it will just read the image's file name like "somepic2014.jpg."

Examples of Alternate Text

When you have an image you want to add to a page, discussion, or even assignment in Canvas - let's say for instance, a mascot pup from the Australian War Memorial photo collection on Flickr:  

Black and white photo of puppy mascot, being dried after a bath

You want to make sure that 1) you include alternate text and 2) what you write is applicable in the overall flow of the page.

So, in other words, the way you write your text tag will depend on how the image works in relation the text. If you were talking very specifically about the Flickr collection, World War II, and dog mascots, you may want to put in a tag of something along the lines of "Black and white photo of puppy mascot, being dried after a bath." Usually you would not include the word "photo" as a screenreader can detect an image - but in this case, the black and white photo part of it is crucial information in the description.

However, if you were just including a picture of a dog, and further context was not necessary, you could put "Drying a puppy after his bath." 

Or, if this was related to dog breeds, you may put in "Stabyhoun (or perhaps Large Münsterländer) puppy mascot of Australian Army, 1943."

Alternate text is not always the easiest thing to generate. It seems obvious and perhaps simplistic, but it is actually powerful - and a lot harder to write aptly than you might think.

Click here for original mascot image on Flickr Commons.

Adding Alternate Text Tags in Canvas

There are two ways to add alternate text in Canvas. Actually, there are three, but the first two ways land you in the same place, and the third way involves a tiny bit too much coding, so lets stick with what Canvas gives us.

Add your image into Canvas via the File manager. 

Adding images to Rich Text Editor in Canvas

Resize it as necessary. Click on the image, then click on the Tree Image icon on the tool bar. This brings up the Insert/Edit Image window. It will have already populated the URL for you - but in this case it's pointing to the course files. Leave that part alone. What you want is the alternate text field. 

Insert / Edit Image Window

Enter your text and hit update. 

The second way is is if you wanted to add a Flickr Creative Commons image and/or a URL or even a Canvas file. Instead of using the File Manager, you would go straight to the Tree icon in the toolbar and add the image that way, making sure to include that alternate text.  

Insert / Edit Image Window on Canvas to add Alt Text

Further References

http://webaim.org/techniques/alttext/

http://guides.instructure.com/m/5834/l/92747

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk