Accessibility Considerations

Printer-friendly versionPDF version

Accessibility Considerations

Online Course Design Tips for a More Accessible Portal Course

line image of an unlocked lock with the text "accessible"This guide outlines how to leverage Portal accessibility features to help deliver a more inclusive, accessible course experience to students. This information is helpful to anyone teaching, setting up or supporting a Portal course.  While it is easier to design an accessible course from the outset, the information contained herein is most certainly useful to anyone looking to retrofit a past course for future offerings.

Please note: This is not exhaustive list of web accessibility considerations. For more information, please see the Additional Resources section of this guide.
 

Video Playlist:

A 6-video playlist containing an introduction to accessibility, and all video instructions on this page.  Or, view Accessibility Topics below (text, images and videos).


 

Accessibility Topics

The instructions below contain text, images and videos.

Alternative Text for Images - Instructions Alternative text for images - Video   Youtube "play video" icon
Meaningful Hyperlinks - Instructions Meaningful hyperlinks - Video   Youtube "play video" icon
Judicious Use of Colour - Instructions Judicious use of colour - Video   Youtube "play video" icon
Structured Pages and Documents - Instructions Structured pages and documents - Video   Youtube "play video" icon
Closed Captioning for Videos - Instructions Closed captioning for videos - Video   Youtube "play video" icon
Additional Resources  

 

Alternative Text for Images

Images added to the Portal or any website must have alternative text, often referred to as “alt-text” or "alt-tag." Alt-text is the text that the individual uploading the image adds as a description, enabling software programs to read out the text to users. 

To add Alt-text, navigate to the area of the course where you are uploading the image.  In the content editor, select the Insert/Edit Image icon.

Portal content editor displaying insert/edit image icon

insert/edit image icon


When prompted, browse to your computer and select the image. Select Insert.

 

adding alt-text to an image

Type the alt-text in the Image Description box. Keep in mind that a user should be able to understand the contents of the image based solely on the alt-text.  Therefore, the more information the user can add that is relevant to the course, the better. For example, "Satellite image of Planet Earth."


When you are satisfied with the image and alt-text, select Submit.

It is important to note that some images may require lengthier descriptions.  For instance, in the case of tables, infographics and other complex graphics it may be necessary to write several sentences in the alt-text field to describe the image, as descriptions will need to have greater detail for students to understand the content.

Alternative text for images - Video Youtube "play video" icon

Meaningful Hyperlinks

When adding hyperlinks to your course content, ensure that they are meaningful, that is, that they make sense when read out of context.

Often we encounter links with text such as "click here" or "learn more."  Such links are vague, and they prevent users from properly identifying the contents of the page to which they are about to navigate. Instead, favour hyperlinking that clearly describes the name of the page or reason for visiting the page. For example:

Read more about Roberta Bondar’s contribution to space medicine. Additional resources are available on the Canadian Space Agency website.

Week 1 Reading:  Gamwell, L., & deGrasse Tyson, N. (2015). Mathematics and Art: A Cultural History. Princeton University Press.

To add a link in the Portal, highlight/select the text to be linked. Then, select the Insert Link icon.

Portal content editor displaying insert link icon

insert link icon


Type or paste the link and select Insert.

 

Meaningful hyperlinks - Video Youtube "play video" icon


Judicious use of colour

It is important to not rely on colour to communicate meaning, as not all users experience colour the same way. Consider, for example, the difference in needs presented by students with colour blindness or with low vision.  Distinctions in meaning should therefore be communicated carefully, based on content or sentence structure, rather than colour. For instance, rather than stating "Items in red are due in Week 2," favour "Due on Week 2: paper draft and group selections." Another alternative would be to present information in list format:

Due on Week 2:

  • Paper draft
  • Group selections

Also be aware of colour contrast, for both text content and for images you share. Materials should have high contrast, such as black and white for example, as opposed to low contrast such as yellow and white. To determine whether your colour selections have sufficient contrast, try a web tool such as WebAim’s Colour Contrast Checker.

Judicious use of colour - Video   Youtube "play video" icon

Structured pages and documents

You can improve the organization of your Portal course pages by adding headings, bulleted lists and consistent structure. When you type into the Portal using the content editor, there are several formatting options from which you can choose, as in a word processor.  If your message or content is broken up into sections, it’s important to structure it in hierarchical order. The Portal content editor offers three levels of formatting: Heading, Sub Heading 1 and Sub Heading 2.  

Formatting options in the Portal: Heading, Sub heading 1, Sub heading 2, applied to an exampleFor instance, in order to present information about grading and topic selection for a particular essay, one might structure the page in this manner:

Essay Instructions (Heading)

Grading information (Sub heading 1): This essay is worth 40% of the total course grade.

Topic Selection (Sub heading 1):

Suitable essay topics (Sub heading 2): Comparison of planets; Space imaging; Analysis of space education programs

Ask the instructor for permission (Sub heading 2): Citizen science projects; History of space exploration

Unsuitable essay topics (Sub heading 2): Extraterrestrials

Structuring the text in this manner is important because screen readers, which are programs used to read the content of a web page, allow students to tab through the content in hierarchical order. If you were to simply bold the headings, screen reader users would not be able to determine how each section relates to each other and to the content in order of importance.

To apply formatting, highlight/select the text and then the appropriate formatting from the content editor.

Paragraph button in content editor

Formatting options in Paragraph menu in content editor

Be cognizant of formatting applied to uploaded documents, such as Word and PDF, as they retain their original formatting. Course materials uploaded to the Portal should be consumable by all students, including students with disabilities.

Using accessibility checker in Microsoft Word

When creating documents, apply the built-in formatting options of the application you are using. If available, also make use of the accessibility checker in the application in which you created the document. The image to the left contains an example in Word.

For information on creating and saving to PDF format, please see PDF Accessibility.

 

 

 

Structured pages and documents - Video   Youtube "play video" icon

 

Closed captioning for videos

When utilizing video content in your course, ensure that videos are either closed captioned or have a transcript of the content available to users.

If you are uploading your own video and transcript to the Portal, ensure that the transcript you provide has the necessary information describing visual content in the video. You may wish to point students to additional resources as well as complete descriptions of the media elements contained in your video. The transcript can be provided in a separate text file next to the link to the media file.

If you are searching for videos in YouTube, you can filter results to closed captioned only by adding "cc" after the search terms. Keep in mind however, that sometimes captions are added via the automatic captioning service and there may be errors in the text. Watch the clip all the way to the end to ensure that captions are accurate.

searching for videos in youtube that are closed captioned

 

Closed captioning for videos - Video   Youtube "play video" icon

Additional Resources

 

University of Toronto

CTSI Accessibility Guidelines: Tips and advice to improve accessibility of course content published within the Portal. Centre for Teaching Support & Innovation.

AODA Office: Information on the Accessibility for Ontarians with Disabilities Act for University of Toronto Faculty and Staff. Human Resources.

Province of Ontario

Introduction to Accessible Education: Accessible Campus, Council of Ontario Universities.

Web Accessibility Tools

Blackboard Accessibility: Accessibility of Blackboard products.

WAVE: Evaluates the overall level of accessibility for any given website.

Color Oracle: Displays colour on a website in a manner similar to how a user with color blindness would perceive it.

Image Analyzer: Examines website images and tests their compliance with accessibility standards.

WebAim: Accessibility services offered by Web Accessibility in Mind.

How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2.0 requirements (success criteria) and techniques. 

NVDA (NonVisual Desktop Access): Free “screen reader” which enables blind and vision impaired people to use computers. It reads the text on the screen in a computerised voice.