5 principles for creating accessible Canvas pages
What is Accessibility?
Wikipedia defines accessibility as "the design of products, devices, services, or environments so as to be usable by people with disabilities." The goal of web accessibility is to provide all people with the opportunity to access the information and features found on the internet. Accessibility is an important aspect of our course development and teaching processes because it provides each student equal access and opportunities.
There are various types of disability for which a student may need accessibility accommodations in our courses. Although there are a myriad of subcategories, the main categories that we want to address in our classrooms are:
Visual: Blindness, low vision, color-blindness
Hearing: Deafness and hard-of-hearing
Motor: Inability to use a mouse, slow response time, limited fine motor control
Cognitive: Learning disabilities, distractibility, inability to remember or focus on large amounts of information
Accessibility within education is a very important concept because it allows students with disabilities to access and interact with course content, regardless their conditions. A course that is designed around aspects of accessibility will allow all students to actively participate in course activities and access the information they need to excel.
Principle 1: Use Headings
When you create content in Canvas, it is important to mark up the page using the built in style options, found in the Canvas Rich Content Editor (RCE). By default, the text will be styled as normal, or paragraph. If you are creating sections on your page, you may be tempted to distinguish the headings by using BOLD, italics, or changing the color and size of the text. However, the proper approach is to format the sections as headings. From the format dropdown in the RCE, you can choose from Headings 2-4. By default the formatting will be determined by your institutional style guide, but you can go in and change the properties in the HTML editor, such as the color, size, alignment, and so on. You can also apply Heading 5-6 in HTML if you choose.
By default, web developer guidelines state that a webpage should only have one Heading 1 - which is the title of the page. In Canvas, the Heading 1 is always the title of the assignment/discussion/page, etc. So the first heading you would use on your page is Heading 2. When using headings, it is important to maintain a properly nested order. Heading 2 should be used to delineate the main sections on your page. Heading 3 is a subsection of a heading 2. Heading 4 should only follow a heading 3, and should not appear directly under a heading 2 or as the first heading on your page. These guidelines will help facilitate screen readers as they navigate through your pages.
Principle 2: Use Alternative (alt) Text for Images
Images are often important for supplementing or clarifying aspects of a Canvas page. Ensure that your images have descriptive alt text. Good alt text will describe the content of an image in a way that someone who is blind would be able to comprehend. A key to good alt text is to be comprehensive in describing the image, while also being concise.
In order to enter the alt text for your image, click the image and select Image Options. In the image options pane, you will be able to input your description in the alt text box. If your image is purely ornamental and does not have any substantive content to support the Canvas page, you may indicate such by checking the box Mark as decorative. It is perfectly fine for us to use banners and images to increase the aesthetic appeal of our pages, but we just need to indicate such.
Note: don’t be tempted to use a phrase such as: “image of…” to describe your image. The screen reader that is interpreting your Canvas page has already determined that it is an image. Instead, focus on describing the content of the image, whether it is delineating a process or displaying important information.
Some examples of appropriate alt text might include:
Panda bear eating bamboo
Therapist offering advice to a client
Student walking up a staircase while holding books
Principle 3: Use Tables for Data and Information - Not Layouts
I will be the first to admit that I spread misinformation about how to use tables in the early days of Canvas. I gave workshops and presented at conferences about how you can organize course content in Canvas using tables to display elements. To my credit, I did make it look nice and it was easy for non-programmers to create interesting Canvas pages. But today we know better and we are much more aware of the role and limitations of screen readers and accessibility tools for accessing Canvas content. So now I preach: do not use tables unless you are displaying data or categorized information.
With that said, we should definitely not eschew tables in Canvas. They are easy to build and even fairly easy to decorate. We do want to be mindful to include header rows (and when applicable, header columns). You can adjust these properties either in the RCE or in the HTML editor - whichever you prefer.
Add captions and define header rows in the Canvas table settings
Principle 4: Use Descriptive Text for Links
There are correct and incorrect ways to add website URLs to your Canvas pages. The incorrect way to add a URL is to copy the link and paste it onto your Canvas page/assignment/announcement. The correct way is to highlight the word or words that you wish to hyperlink, and add the URL that way. A Windows shortcut is to highlight the word or words, and press Ctrl + K on your keyboard.
The reason why we do not want to copy/paste links directly onto our Canvas pages is because it is not an ideal practice when considering the process for screen readers, as the screen reader will read the entire URL twice.
When you have either used the RCE or the Ctrl + K keyboard shortcut to create a hyperlink, the Insert Hyperlink dialogue box will appear. The main elements will be the Text to display and the Link boxes.
The Text to display box will consist of the text on your document that will be hyperlinked, and the Link box refers to the location where the user will go when they click on the link. Avoid using generic and non-descriptive text, such as:
Click here
Here
Read more
It is a good practice to avoid phrases such as or similar to "click here" altogether, as they tend to be redundant. For example, instead of a phrase reading "Click here to access the readings for this week", this can instead be shortened to "This week's readings". Aim to be descriptive when linking URLs in Canvas. And again, the worst thing for you to do is to simply drop an entire URL, saying click here: https://www.youtube.com/watch?v=dQw4w9WgXcQ <—Very bad form, but a good video…
Principle 5: Canvas Accessibility Checker
First and foremost, I do want to give a shout out to the fine folks at UCF who created the Universal Design Online Content Inspection Tool, or UDOIT. It is a great tool that will check the accessibility of your entire Canvas course. If your institution does not already have that integrated into Canvas then I would reach out to your administrators and inquire about it.
Canvas has a native accessibility checker built right into the RCE that will allow you to assess the contents of the page you are editing. This is a great resource for ensuring that your Canvas pages and content meet accessibility standards.
This checker will diagnose various components of your page, such as:
alt text and image file names
links
color contrast
tables - captions, headers, etc.
headings
etc.
In other words, it will review much of the content that we are discussing today (and more). When your page content meets the criteria of the accessibility checker then you will receive a celebratory confirmation that there are no accessibility issues detected.
Bonus Principle: Video Captions
Webcam and screencast videos are a fantastic way for professors to engage their students. These videos can be used to disseminate information, provide feedback, clarify important concepts, or simply increase instructor presence in a course. Whatever multimedia platform your institution is using, inquire what kinds of options are available for you to automate the captioning process.
If your institution utilizes Canvas Studio for multimedia, then you can upload or record videos into your Canvas courses and the platform allows you to request or upload captions to your media files. Canvas can create captions in several languages. For an overview of captioning in Canvas Studio refer to the guide:
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas