Body
This Weekly Tip will address making your Canvas course more accessible. We will cover the use of headings for accessibility, the use of the rich text editor's Accessibility Checker tool and direct you to further resources for making your course accessible.
Note: We are drawing on the Student Accessibility Services' Canvas Accessibility @ IC course resource for this tip. Please make sure to visit the course to learn more considerations for accessibility when creating your Canvas course, and get in touch with SAS if you have any questions.
What is an Accessible Course?
An accessible course removes or reduces barriers to instruction with the use of specific (accommodations) and general (best practices) strategies.
Headings in Canvas
What are Headings?
A heading structure is like a table of contents. It shows the hierarchy of content from most important to least important.
The use of headings is a general accessibility strategy – therefore, it falls into the category of being a “best practice” for organizing information.
This is because there are multiple accessibility reasons for using headings - among them, they help non-sighted people navigate web pages through screen readers, they make your page accessible for people using a different kind of device, and they can break down your pages into more digestible sections. This is a “best practice” in that contains elements which are useful for everyone.
Headings Structure
Due to their origin in HTML code, Headings are specified with the uppercase letter 'H' and a number, such as H1, H2, H3, etc., with 1 being the top level of information.
Typically, a document or page will only have one H1 element for the main title. H2 headings represent important topics within the document. Subtopics and sub-subtopics within the document will have H3 and H4 headings, respectively.
H1 = Main title
H2 = Subsection
H3 = Topic within subsection
H4 = Topic within topic within subsection
An example heading structure for this page might look like this:
<H1> Weekly Canvas Tip #10: Headings and Accessibility in Canvas (Page Title)
<H2> What is an Accessible course?
<H2> Headings in Canvas
<H3> What are Headings?
<H3> Headings Structure
<H3> Reasons to Use Headings
<H4> Provide a consistent look and feel for your Canvas pages
<H4> Accommodate different screen sizes
<H4> Increase flexibility of design
<H4> Document navigation for screen readers
<H3> How to create headings in Canvas
<H2> Using the Accessibility checker
<H2>Additional Resources
You can see that the heading structure helps to identify how information is organized on the page. Notice there is no skipping between levels when subdividing topics. (For example, the structure does not jump from H2 to H4.) Not skipping levels helps provide consistency and reduces confusion for anyone navigating the headings using a screen reader.
Reasons to Use Headings
Provide a consistent look and feel for your Canvas pages.
Using headings in your pages will create a consistently clear and legible look and feel for your courses and provide consistency across all IC courses. Students find consistency extremely helpful when navigating course content, regardless of whether they require specialized accommodation or not.
Headings are just one design element that helps provide consistency. Other aspects include banners, icons, and topics.
Accommodating different screen sizes
Headings in Canvas represent an example of "responsive design." Responsive design is when the elements on a page change to fit the size of the user's screen.
For instance, font sizes for headings are not fixed; they are a function of the user's screen size. For instance, heading 2 might be 28.8pt on a large screen, but smaller on the screen of a mobile device. You can try this out for yourself. If you are viewing this page on a computer, try opening it in the Canvas Mobile app (or vice versa). The headings change from the mobile app to the computer, while the enlarged font stays the same.
Here is a Heading 2 (28.8pt)
Here is a Heading 3 (18pt)
Here is a large font size (24px)
Here is a smaller font size (18px)
Increase the flexibility of design
Using headings makes it very easy to make widespread, consistent changes to your content. For instance, if there is a new update to the CSS or blueprint for Canvas, all headings will change to be consistent with the new look and feel. There is no need to go back and re-format each heading individually; changes apply automatically.
If you are in Microsoft Word and want to change the look of your document, you can change the design of all headings with the click of a button. Using headings (or styles) in Microsoft Word also allows you to create dynamic tables of contents that will update whenever headings are added, changed, or removed.
Document navigation for screen readers
Headings provide a navigation aid for anyone using a screen reader. Users can move from heading to heading and can easily understand document organization and structure. This structure is standard in websites such as Canvas and other programs that use headings, particularly word editors such as Microsoft Word, PowerPoint, Google Docs, etc.
In Canvas, headings are set using the dropdown menu in the Rich Content Editor or by using the Format menu (Format -> Formats -> Headings). In either case, highlight the text you wish to change and select the appropriate heading style.
How to create headings in Canvas
In Canvas, headings are created through the Rich Text Content Editor.
To make text into a header, select the text, and then select which header you want to use from the Header dropdown menu. (By default, the Header dropdown menu is set to “Paragraph”, which is the type of text you would use for normal writing.)
The Accessibility Checker
The Accessibility Checker tool is a helpful feature in Canvas that can provide feedback on page accessibility and can even help you to correct some portions of your course. (However, it is not perfect in catching errors in accessibility and page structure. The best solution is to use it as a tool, but to educate yourself about accessibility and read through your pages carefully!)
It is housed inside the Rich Text Content Editor, at the bottom right, indicated by a small icon of a person in a circle. If there is a small number in an orange box, that indicates that you have multiple accessibility problems to check and revise. By clicking on the Accessibility Checker tool, you will be linked to a dialogue that will guide you through each of the problems to be fixed. This can usually be done automatically by the Accessibility Checker if you select fixing it from the “Action to Take” dropdown box and click the blue “Apply” button.
In this article:
- We covered the notion of Accessibility and why it is important
- We talked about the use of Headings to make Canvas pages accessible
- We reviewed the use of the Accessibility Checker tool
To learn more about accessibility as it applies to course design in Canvas, we highly recommend the Student Accessibility Services' Canvas Accessibility @ IC course.
For more information on specific functions of Canvas tools, visit the following resources:
Additional Resources
How do I use the Accessibility Checker in the Rich Text Editor?