With Canvas content, it is important to consider layout and formatting within a course, for online quizzes, and for documents, video or audio files that are shared.
How you organize and present information plays a big role in determining the usability and inclusivity of your electronic content. Visual formatting—layout, spacing, color, and font selection—all affect the degree to which information can be easily read and understood. We know this from age-old principles of graphic design as well as modern studies of usability.
Yet we mustn’t rely on visual formatting alone to convey important information. That’s because not every reader will see your document the way you designed it due to varying screen sizes, printing, and photocopying. Others won’t see it at all; they will hear it using text-to-speech software. Thus, Visual formatting should be combined with structural formatting.
Structural formatting is accomplished with Headings. Headings are used to create an outline, or table of contents, that helps users to navigate the content more efficiently. This is especially true for readers who navigate using assistive technology. Thus, using headings is a very simple method of increasing the usability of your electronic content. You can apply headings in Word documents, on the web, and in Canvas courses.
- Use headings to provide a page structure or outline
- Nest appropriately - do not skip levels
- Use headings to indicate sections of content. Avoid over-using them, especially for links.
Further resources on appropriate use of headings:
- Heading Tags (H1, H2, H3, P) in HTML - Accessibility at Penn State
Images convey information quickly and powerfully—assuming they can been seen and understood. However, some readers may not understand the meaning of the image; others may not be able to see it due to visual impairment, personal viewing preferences (especially on the web), or technological limitations.
Alternate text (“alt text” or "alt tag") is added to an image to provide a textual alternative to visual information. Why is this important? Remember, some users won’t see your information; instead, they’ll hear it using text-to-speech or screen-reading software. By adding an alt text to an image, you make its meaning available to people who, for whatever reason, cannot see it.
Alternate text should be added to all non-text elements, including:
- Microsoft Office SmartArt
Make alternate text meaningful to a listener:
- What is the context of the image? What meaning does it add to the page?
- Be concise. Describe only what you expect visual users to get out of the image.
- If the image is already described in the surrounding text, the alt text can be very short.
- Avoid redundant statements like “Image of” or “This is a picture of.” Simply state what it is.
- If an image is purely decorative, mark it as such (various methods depending on software).
Captioning provides a synchronized text transcript of the audio for any type of multimedia so that the information can be read as well as heard. This alternate method of delivery is vital for including those with hearing impairments, but it is also beneficial for other users, such as those learning the language used in the video.
Captions can be combined into a video transcript. Because the transcript is searchable, users can locate a specific points in the video, and search engines will bring more traffic to your site.
Uploading Captions to Canvas
You can upload a caption file for any videos you have uploaded into Canvas. The caption file must be in SRT or VTT format. These instructions assume that you already have the file ready to go. If you don't have a caption file, see Captioning Videos for options.
- Click on the video in the Rich Content Editor to enlarge the video window. Hover over the CC icon to open the closed-caption options, then click on Upload subtitles.
- Go to step 3, and click the drop-down menu to Choose a Language.
- Click on Choose File to select the caption file, then click Open.
- Once the file name shows up, you can click the Upload button.
Canvas Captioning Resources
The quiz question types available in Canvas are mostly accessible to assistive technology. Some exceptions include:
- Drag & drop: This feature is completely inaccessible and should be avoided
- Dropdown choices are not recommended unless the list of options is very long
- Text questions: The text editor toolbar is not reachable by keyboard or a screen reader
If a student reports that they are unable to take a quiz using their assistive technology, you can contact the ATRC for help and guidance.
Giving Extra Time
Extended time is a frequent accommodation for students with disabilities. Below are resources on how to add extra time to quizzes in Canvas.
Uploaded files such as Word documents, PowerPoint slides, and PDFs also need to be designed to interact well with technology to include assistive technology and mobile devices. These topics are covered in their own sections of this website.
What is UDOIT?
UDOIT is a Canvas plugin that allows you to check for accessibility within an entire Canvas course and fix problems on the fly.
- UDOIT provides a short description of how and why to fix issues that it discovers. If you are not sure how to resolve an issue after UDOIT's explanation, please use the contact form to request further help.
- UDOIT is unable to scan inside of uploaded documents (e.g. Word, PDF, PPT). It is your responsibility to make sure any uploaded files are accessible.
Fixing a Sample Error with UDOIT
Click on the UDOIT link in your course navigation.
On the UDOIT page, click "Scan this course."
Once the results display, scroll down to a section that has errors, and expand the entry. Below is an example of an image without appropriate alternate text.
Click on "View the source of this issue" to see the image without having to go search for it in the course.
As you can see below, the alt text is the same as the filename. Filenames are often long strings of characters without meaning and don't explain the function of the image. It needs a short, meaningful description instead.
Click on "U FIX IT!" to fix the problem right here and now without having to navigate away.
In this case, a text box appears where you can type the description and then submit it. The change is now saved.