Accessibility Principles in Canvas

L-I-S-T introduction

We will be using the acronym, L-I-S-T, to help us apply the accessibility principles needed to create an inclusive learning environment. LIST represents:

Writing descriptive links
Writing meaningful alternative text for images
Providing structure to content by using the rich content editor's built-in list tool and applying headings
Providing tables that have correct reading order and description

List
Images
Structure
Tables
Accessibility Checker
Self-Paced Courses & Other Resources

List

You can create a list from items you have already typed out, or you can add to the list as you go. All items on the list need to be on separate lines (use the Return key to advance to the next line). Highlight the text that is part of your list, then select either the bulleted or the numbered list style.

When to use bullets

If your items are a group of equivalent ideas or terms, and the order is not an essential aspect of the concept, use a bulleted list. Consider, for instance, the list of things every instructor can easily do to make sure content pages are accessible to everyone:

Chunk material into useable bits.
Use white space to prevent cognitive overload.
Use styles to tag headings for users with screen readers.
Use bulleted and numbered lists to synthesize information.
Integrate meaningful hyperlinks into your text.
Ensure color contrast is optimized for the visually impaired.

When to use numbers

If your items are a sequence, steps to instructions, or an essential part of a whole (such as, "there are four things you need to know to complete this assignment"), use a numbered list. For instance, consider these sequenced instructions for creating a list:

Select the numbered list icon from the editing bar.
Enter the first step in your sequence, then select Return.
Enter the next step in your sequence, then select Return.
Continue entering steps until the instructions are completed.
De-select the numbered list icon in the editing bar--your cursor will snap back to the left margin, ending your numbered list.

Below is an embedded Studio video. I have embedded it using the Allow Comments option as we'd like to give you the opportunity to ask any questions! I have some questions for you to think about and reply in an answer in the comments section. Closed captions are still processing - stay tuned. Please contact lmadrona@miracosta.edu should you need immediate closed captioning assistance.

Images

Images not only provide visual appeal to our pages, but they also convey important information. The old adage, that a picture tells a thousand words, can be very true! The problem occurs when we add an image that provides the content to our students, but fail to provide an adequate text alternative for students who are visually impaired. The alternative text - called alt text for short - feature allows you to provide a description of the image.

There are times when images not only provide information, they also serve a function, such as a button or links to additional resources. In this case, the alt text should clarify the function.

There are scenarios where descriptive alt text is not required - sometimes a cigar is just a cigar, and sometimes an image is just there for visual appeal. It's purely decorative. In this case, alt text is not necessary, as the image has no value to a student using assistive technology. Many images, however, have a pedagogical purpose, and, therefore, require a description explaining the information the image conveys.

The accessibility experts at WebAim provide the following guidelines. The alt text should:

Be equivalent in presenting the same content in and function of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically no more than 10 words.
NOT use the phrases "image of" or "graphic of" to describe the image. The screen reader will announce the image. If the medium of the image is an important aspect (such as a photograph or oil painting), then the medium should be included.
NOT contain file extensions such as .jpg or .png
If the image contains words, the alt text should convey those same words.
Images that are text rich, contain complex graphs or charts, and/or that really do need a thousand words to explain them require more than alt text. The information delivered by the image can be explained in the text preceding or following the image.

How to Add Alt Text

Select the embedded image icon, which is located in the tool bar.
In the Insert/Edit Image dialog box, enter descriptive text in the Alt Text field. For decorative images, check the Decorative Image box instead.

Decorative images

Images that are purely decorative, and have no pedagogical value (other than to provide visual appeal to a page) do not require a descriptive alt text.

Below is an embedded Studio video. I have embedded it using the Allow Comments option as we'd like to give you the opportunity to ask any questions! I have some questions for you to think about and reply in an answer in the comments section. Closed captions are still processing - stay tuned. Please contact lmadrona@miracosta.edu should you need immediate closed captioning assistance.

Structure

Structure helps us organize page information in meaningful ways. There are two elements that provide content structure:

Headings
Lists

Headings

Heading levels help segment material on the page, and help your students understand the hierarchy of topics and subtopics on your page. Chunking material prevents cognitive overload, providing information in digestible pieces for your students. Headers are an important organizational tool. They will help your students better understand the main points of each section, help provide a cognitive schema for the information you're presenting, and allow your students to skim the page.

From an accessibility perspective, headings are valuable as they provide individuals using screen readers with a simple method to navigate within a Content Page. In a recent study conducted by WebAim investigating the browsing habits of screen reader users, over 75% of individuals reported they use headings always or often to navigate web pages. Rather than navigating line-by-line through a document or Web page, the use of headings allows individuals to move through the information based on heading topic.

Notice how the text size changes depending on the heading level?

Header 2 is larger than Header 3.

Header 3 is larger than Header 4.

If you are consistent in your header level structure, students who are visual can quickly determine based on text size how the "main topics"(Header 2's) relate to their subtopics (Header 3's and Header 4's.)

Tables

Some disciplines use tables routinely, so learning how to do them correctly is essential. Most instructors use tables routinely to create unit To-Do lists, to provide information about due dates or readings, or to provide a chart for grading. Tables are a ubiquitous part of teaching.

The x and y-axis of a table - usually the top row and the left column, are visual markers that help sighted users navigate, and that provides important context to the information in the respective cells. Just as we need to tag headings so that students using screen readers can more easily scan and navigate a page, we need to tag our tables to assist in navigation and to provide context to the data in the cells.

Denoting a header row and column (when appropriate) are required elements, but there is one more optional element we'd like you to know about, as well. Canvas allows you to include a label or caption with each table. This is a brief descriptive statement that allows the user to quickly assess the content of the table. It's good practice to add a caption as this provides an overview of what the table is about.

How to create an accessible table

The easiest way to create an accessible table is to use the Accessibility Checker in the rich content editor.

If it is not visible, you will need to reset page view or zoom out. The Accessibility Checker is unavailable in the Teacher app.

The Accessibility Checker will walk you through the inaccessible elements on the page. Remember: the Accessibility Checker is a robot - it cannot determine if images are meaningful or if headings are correctly structured.

To learn the manual method of adding tables read Tables.

Accessibility Checker

Most authoring programs such as Canvas, Microsoft Word, PowerPoint, and Adobe Acrobat have an accessibility checker. Note that accessibility checkers have a limitation - they cannot determine proper heading structure or determine if alternative text is meaningful or should be decorative.

Accessibility checkers serve as an excellent "second pair of eyes"! Use it as a guide! It is highly recommended that you take one of the CCC Accessibility Center's self-paced courses to learn how to effectively use the accessibility checker.

Learn more about the various accessibility checkers:

Canvas Accessibility Checker
Microsoft Word and PowerPoint Accessibility Checker

Self-Paced Courses & Other Resources

The California Community Colleges Accessibility Center has created multiple free self-paced courses to help you learn how to create an accessible Canvas environment, Microsoft Word docs, PowerPoints, and PDFs (this course, in particular, is not for the faint of heart).

Visit CCC Accessibility Center's self-paced accessibility courses for more information and registration.

Please read all tabs above & select next to continue.