Creating Accessible Pages
At Seattle University, our goal is to make sure that all of our online course pages can be read by screen readers. What is a screen reader?
A screen reader is a software application that enables people with severe visual impairments to use a computer. Screen readers work closely with the computer's Operating System (OS) to provide information about icons, menus, dialogue boxes, files and folders.
Here are some rules to make things clear for screen readers. (These rules also help organize content for people with no visual impairments.)
Use Canvas Formatting Tools
Use headers rather than only changing font sizes (e.g. 12pt in the example below). Headers allow readers (and screen readers) to interpret the logical structure of the content. Canvas has three header types along with paragraph text.
- Header 2 is great for headlines
- Header 3 is good to separate sections of text
- Header 4 can be used for sub-sections
In Canvas, Paragraph text is set to default at 12 points. You might decide to change this but remember 10 point font size should be your minimum for legibility.
Always use the numbers and bullets function in Canvas rather manually typing 1., 2., 3., etc.
Use Alt Text
Alternative text or "alt text" provides a description of an image. If users cannot see an image due to a slow connection or because it is being read by a screen reader they can get a description of the image from the alt text. When you upload an image to Canvas, you will be prompted to add Alternative Text. Unless it is purely a decorative image, it is always a good idea to briefly describe your image.
If you didn't add alternative text when you uploaded an image, don't worry, you can always add it later by highlighting the image and clicking on the Image Embed Icon. This will open a window that will allow you to add alt text.
Create Clear Hyperlinks
When creating links to other Canvas pages or external websites, avoid using "Click Here" or pasting in a long URL. Best practice is to highlight the text you want to hyperlink with your cursor and then paste the URL into the link box. The result will look like this:
Read Canto 3: Inferno by Dante Links to an external site.
Use Color Wisely (and don't underline)
It's tempting to use color for emphasis but keep in mind that online, colored text usually indicates a hyperlink. If you use a lot of colored text for emphasis your students will quickly learn to stop clicking on colored text. Then, when it comes time for them to access the information you have provided via hyperlink, they may well skip over it. The same goes for underlines. Don't underline text. Use bold and/or italics for emphasis.
Sometimes you may be using color in tables (but see the Avoid Tables section). Not all color combinations are legible for all people due to poor contrast between light and dark, and many combinations are not legible for people with colorblindness. Below are some examples of good, bad and average color combinations.
Tip: You can use Contrast Checker Links to an external site. to ensure your text has sufficient contrast for accessibility. Or ask your CDLI instructional designer for assistance.
Color Contrast Examples |
|
|---|---|
| Red on black is bad | Yellow on black is good |
| Blue on orange is bad | Black on orange is ok |
| Red on green is bad | White on green is good |
| Yellow on white is bad | Black on white is great! |
Avoid Tables
Because it is hard to arrange things next to each other or have text wrap around an image, it is tempting to put things in tables. (We sometimes succumb to this temptation ourselves.) Unfortunately, using tables in this way is not a great idea because it makes it difficult for screen readers to go through the information in the correct order. On the other hand, if you need to set up some information that would normally be presented in a table, that is acceptable. You just need to make sure that your header rows are labeled correctly.
More Resources
Accessibility in Canvas
Kim Thompson, the senior director of Disability Services at Seattle University put together this wonderful handout about accessibility in Canvas.
Contrast Checker Links to an external site.
Use this tool to provide adequate color contrast on Canvas pages when adding background colors behind text.
Accessibility Cheat Sheets Links to an external site.
The National Center on Disability and Access to Education has developed numerous accessibility cheat sheets to help you make sure your Word documents, PDFs, Powerpoints and other forms of content are accessible. Check them out.
Resources from WebAIM Links to an external site.
WebAIM is a non-profit organization based at the Center for Persons with Disabilities at Utah State University and they list a number of useful resources on their Resources page.