This page is an overview of creating accessible content in Canvas. Accessible content in Canvas will allow information to be readily available for assistive technology. Screen readers can easily navigate the content when accessibility is considered during the design process. Acessibility will not only benefit people with disabilities, but it will also improve overall usability for all users. This information will cover creating accessible content using the rich content editor, uploading documents and multimedia, and scanning a course for accessibility.
In this Tutorial
Rich Content Editor
The Rich Content Editor is used to add or edit content in Canvas. The styling option icons are similar in appearance and functionality to other editing programs. This tutorial will highlight various styling options to increase accessibility.
Headings are styles to give a page structure by category or topic. Headings are used to build sections within a page to create a visual hierarchy structure to show topics and sub-topics. A screen reader or viewer can easily find information based on headings. For example, if you were only looking for information on creating accessible tables on this page, you can use headers to skim (visually and technically) the page to find the sub-topic quickly. Headings improve usability, efficiency, and accessibility.
Heading styles options are located under the Paragraph drop-down. Click Paragraphs, select the desired heading and begin typing. Highlighting a word and selecting the heading styling will also change the heading. Please note the title of the page is classified as Header 1. Selecting heading styling should replace manually selecting fonts and sizing.
Below is a sample of the hierarchy structure. Use Header 2 for the page title and Headers 3 and 4 for subtitles/topics and categories. Paragraph is used for the body of the content.
Organizing information on a page using bullets or numbered lists presents content in an organized manner and is recognizable to assistive technology. For example, when numbered lists are used screen readers will automatically detect the sequence and announce, “Number 1…”. Be sure to use numbered lists for sequential ordered content and bullets to present summarized/brief content.
Images can be inaccessible for people with low vision, color blindness, or who are blind. In order to provide equal access to information presented in visual formats, a detailed written description of the image is required. Complete one of the following to provide descriptions for images:
- Provide a written description below the image (on the page)
- Insert an alternative text by clicking Embed Image. Write the alternative text in the Alt Text field.
A written description or alternative (alt) text provides a written description of the image to screen readers. Consider the best description option for the image and page.
- When inserting the image, be sure to use the picture inline option to optimize reading order for screen readers
- Alternative text is extremely critical for images used for instructional purposes. For assessment statements such as, “Use the graph to answer questions 1-3” an alternative text is required for the graph.
- Complex (Math and Scientific) graphs and charts may require a caption (for larger amounts of information) to write a detailed description
- Decorative images, such as line dividers, do not require a written description or alt text
- Be clear and specific
- Use phrasing to include inferred information
- If the image is for instructional purposes, be sure to include necessary information to answer questions
Canvas provides a wide range of color options. However, the majority of the colors fail to meet the WCAG 2.0 AAA standards for color contrast. Color contrast plays an important role when viewing content for people with low vision or color blindness. Images that convey meaning or create emphasis, using color, creates a barrier because it is not perceivable by all users. Additionally, typed text in neon and pastel colors can increase eyestrain over time, which can be taxing for any reader.
Note: The color white passes when the background is set to black (or equally dark color).
- Images using color to convey meaning: write an alternative text to provide a color key description for all viewers to access
- Use a browser extension, i.e. WAVE to test a page for any color contrast issue
- Consider using one of these higher contrast colors while developing content in Canvas:
Tables are used to organize cross-referencing information visually. However, sometimes tables are used to organize the layout of the page or as a text box. Screen readers cannot decipher this type of content within tables and should be avoided. Use tables only to organize structured information. Quick Tips Tables in Canvas.
Links can help redirect a viewer to related content. Links should be clear and directly relate to the title or heading of the linked page. Links with vague wording such as, “Click here for more details” or “Go here for more information” can be misleading for screen readers and keyboard users. Instead, use direct wording such as, “Visit the Universal Design Center for more information about accessibility.”
Canvas provides simple ways to add content. However, it is important to provide an inclusive setting to ensure all students have access to instructional materials. When selecting and developing content to add into Canvas, be sure that:
- Documents are accessible, i.e. Syllabus, OER content, etc.
- Videos recorded in Canvas or external video have captions and transcripts.
- Images have alternative text.
- Podcasts or audio files have transcripts. Visit the Request Services webpage to request media captioning through NCOD: Deaf and Hard of Hearing Services.
WAVE is a free browser extension that will scan any web page for any potential errors or warnings. Scanning a Canvas page for accessibility takes a little time and can alleviate inaccessibility issues in the future. When all editing is complete, scan the page.
First, download the WAVE browser extension and scan the Canvas page for accessibility. Second, use the evaluation techniques on the Universal Design Center website to gain a deeper understanding of how to read the report. For additional support or questions, please contact the Universal Design Center at 818-677-5898 or firstname.lastname@example.org
- Create accessible Canvas pages during the design/creation process
- Use a browser extension, such as WAVE, to scan for accessibility
- Add accessible content, i.e. syllabus, handout, eBooks, etc.
- Foster an inclusive setting by adding content with accessibility in mind
- Canvas: General Accessibility Design Guidelines
- Canvas: Accessibility within Canvas
- Quick Tips Tables in Canvas
- Canvas Accessibility at Penn State
- Captioning Videos in Canvas
- Creating Accessible Documents
- Creating Accessible PDF’s