Designing with usability/accessibility in mind will help students with disabilities be successful in your course. As an extra benefit, adding usability features gives ALL students the opportunity to learn more effectively. For example, video captioning is clearly of great help to students with hearing impairments—and it’s also is beneficial to:
- students who are learning English
- students who are struggling readers
- students with attention deficits
- students reading on tablets and cell phones, which will reflow the text to fit the screen size, and
- students working in a noisy location (on the bus or in Starbucks).
In order for a page in Canvas to be accessible it must have the following items addressed:
- Heading styles are consistently used.
- Lists are created with the tool in canvas.
- Links are unique and descriptive.
- Tables have designated row and column headers.
- There is sufficient contrast between background and foreground colors.
- Visual elements are not used as the sole method of conveying the importance of information.
- Every image in the course has descriptive alternative text, including any text within the image and does not contain phrases such as “image” of or file extensions such as .jpg.
Where to start
We must first determine where we are before we can start addressing accessibility. There are tools that exist that can help us automatically check for accessibility, but this post is for basic accessibility implementation.
Headings provide multiple benefits, but for a student using a screen reader, it allows them to navigate more effectively. Effective use of headings can allow that student to drill down to what they need to access rather than requiring that they read through the whole page.
The screen reader allows you to drill down from higher heading to lower heading. This means you can list all heading level 3s under a specific heading level 2 for more precision. One suggestion is if you provide an action item on the text page, provide a heading over that, so the student can skim directly to the homework, additional reading, etc. A well-aligned page should have headings with an appropriate level of complexity:
- Heading Level 1 is the title of the page, placed by Canvas, you will always have this. If the page is very short, less than 100 words, it can be left with no additional headings.
- Heading Level 2 is the highest level separations within the canvas shell and should be used to chunk major topics in material.
- Heading Level 3 and lower should be used for text-heavy pages and should be used to give additional structure to the document.
- The Heading levels should form a tree, where each heading is preceded by the level one above it.
Lists are handled differently by screen readers and can be confusing to read if used improperly. Properly designed lists can be copied to other software while maintaining the structure, which might assist students in responding to prompts.
- Bulleted lists are for lists where order is unimportant
- Numbered lists are for lists where order is important
- Lettered lists are primarily for unordered lists where referring to a specific item may be important.
Links should have descriptive titles describing where they are sending students. Screen readers allow users to pull a list of links from a page. If the pages have meaningful names, they can find exactly the link they need without referring to the surrounding text. All students can use the tab button to jump from link to link for a similar experience. This test checks for the following issues:
- Hypertext links should be meaningful to give the student an understanding what they will see when they click on the link. Meaningful text should not include “click here” such as “Click here to go to the reading”, simplifying to “Reading Assignment” will be more efficient for most students, and preference would be to provide more specific text such as “Additional resources can be found at The High Tech Center Training Unit’s resources on web accessibility .”
- Hypertext address should not be used as the text for the link, as screen readers can default to reading it one character at a time, which strips it from any meaning in the text.
- Non-hypertext elements should refrain from using underlines as they can confuse sighted students who expect underlined text to be a link. Use of bold or italics text decoration for emphasis are recommended.
Tables are treated specially by screen readers and are reliant on the structure to determine how the information is read aloud. It is required to mark table cells as headers when used. This can be done directly from Canvas.
Tables without headers can be confusing or students with disabilities as there is no context for the cell the screenreader is in.
Color contrast simply requires there to be enough difference between fore- and background to make out the text, or other important information. The WCAG accessibility standard requires at least a 3.0:1 contrast ratio for text above 18 point font (14 bold) and 4.5:1 contrast at or below 18 point font (14 point bold). This makes web text easier to read for students with low vision. It also helps make the text more obvious for students who are color-blind.
Simply changing the color or size of the font is not communicated through a document reader to a student using assistive technology. Use bold elements, headings, and italics to pull attention to the material. Uppercase passages should always be avoided because screen readers can assume uppercase letters are an acronym and read them a letter at a time.
Images need accurate descriptions for students who rely on screen readers. Images that convey a lot of text should be avoided whenever possible, and descriptions should be presented to provide enough information within the context of the topic. Keep in mind the context of the picture, which may change the scope of the needed description.
Images should never start with a “picture of” as the screen reader will identify it as an image.
Image context will change based on the audience and what you want them to learn about the image. The same image could have different descriptions depending on its intent.
- “” – Used if the picture is purely decorative
- “Open book” – used as a metaphor or when referenced as an open book
- “Open dictionary”
- “Red dictionary opened to the page that defines university” (if this is important to the context of the document, such as if they had to find this exact page in the dictionary).
For more guidance on using alt tags, please see the Diagram Center’s Poet Training Tool
Canvas has a built-in checker that allows the user to run an automated checker on the canvas page. Once you have implemented all of your changes. Run the checker!