Canvas Accessibility

Canvas is the learning management system (LMS) available for all MiraCosta classes. Canvas provides instructors with a platform to communicate with students, post course materials, and create online assignments.

Canvas accessibility best practices include:

  • Headings & Structure
  • Images
  • Links
  • Tables
  • Color
  • Extended Time for Canvas Quizzes

Headings & Structure

Headings

Headings can provide an organizational and navigational framework for a document’s content, communicating both the informational hierarchy and relationship between different sections. Headings also provide a simple mechanism for an individual using assistive technologies to “jump” from one heading to the next when navigating the document.

Heading Styles drop-down menu highlighted in rich content editor.
Heading levels 2-4, Preformatted, and Paragraph.
  1. Highlight the brief word or phrase, or place your cursor on the line.
  2. In the Rich Content Editor select the styles dropdown menu to reveal Headings 2-4.

Heading Guidelines
  • Headings should follow a logical structure that identifies content based on the organizational content and hierarchy of information in the document.
  • Canvas automatically tags the page title as Heading 1. Page content headings should start at Heading 2.
  • Avoid skipping heading levels.
  • Headings should be short and succinct.
  • For additional guidance on formatting, please review the information on Structure.

Lists

Lists provide a structured order to a group of connected or sequential content. A numbered or bulleted list may present the same information more effectively than simple data tables with fewer steps.

List style button highlighted in the Rich Content Editor.
List style options include ordered (numerical, alphabetical, & numeral) and unordered list styles (black, white, and square).
  1. Highlight the grouped text.
  2. In the rich content editor, select the appropriate list style (bullet or number list).


Formatting guidelines:

  • Remove any lists created manually, such as those using dashes, asterisk, or other symbol characters.
  • Avoid using indentation to provide a visual list in lieu of the list style button.
  • Numbered lists are used to present a group of items (words, phrases, sentences) that follow a sequence.
  • Bulleted lists are used for a group of items without a sequence.
  • Lists should contain at least two or more list items, unless being used to create an outline.
  • Nested lists are acceptable, such as a numbered list that contains a nested bulleted list.

Images

Images that support the content require a text description (also called “alt text”) that communicates the purpose and/or content of the image. This information is presented to the individual using assistive technologies, allowing them to hear the description of the image. Image descriptions should be short and communicate the main purpose of the image. Images that are decorative can be marked as such and are ignored by assistive technologies.

If a longer description of the image is necessary to fully explain its content, consider inserting a more detailed description of the image within the document text that precedes and/or follows the image.


Adding Alt Text

Submenu “Image Options” appears above highlighted image.
In “Image Options” window, write alt text in description box; select “Done”.
  1. Select the image. The image should be outlined blue and have four blue squares at each edge.
  2. When the image is selected, an Image Options will appear either above or below the image.
  3. If the image has pedagogical value, write a brief description in the Alt Text box.
  4. Select Done to save the information.

If the image is decorative, select the Decorative Image checkbox.

For decorative images, in Image Options window, select “Decorative Image” then select Done.
Image Guidelines
  • A text description should convey the purpose or content of the image in approximately 140 characters or less. Avoid repeating the same information as contained in the surrounding text.
  • If the image is complex, use a short alt text description for the image and then provide additional information in the surrounding text of the document.
  • Do not include the file format in the alt text (Example: .JPEG, .PNG).
  • Do not include phrases “A picture of” or “An image of” as part of the alt text.
  • For additional guidance on writing effective text descriptions (i.e., alt text), please review the information on Images.

Hyperlinks

Documents containing hyperlinks to websites or other online resources can be improved by using descriptive link text that is understood by the reader instead of the full URL. Using the full URL as the link text may not make sense to the reader, particularly if it is long.

Links button highlighted in rich content editor.

Link to an External Resource

  1. Highlight the text to be converted into a hyperlink.
  2. In the rich content editor > select Links > External Links.
  3. In the “Insert Link” window, add the URL to the Link field. Select Done.
Under Links button, “External Links” is highlighted.
In Insert Link window, write description under Link field, then select Done.

Edit an Existing Link

  1. Place cursor on link. A submenu will appear. Select Link Options.
  2. In the Text field, write descriptive text. Select Done.
In the pop-up hyperlink submenu, select “Link Options” to edit existing links.
In Link Options, write descriptive text under “Text” field, then select Done.

Hyperlink Guidelines

  • Use link text that is descriptive and or informs the person as to the link’s destination.
  • For additional guidance on formatting and descriptive link text, please review the information on Hyperlinks.


Tables

Tables in Canvas should be used for data and not layout purposes. An accessible table includes the following:

  • At least one header (row and/or column).
  • Alt Text description summarizing the table.

The easiest method to ensure an accessible data table in Canvas is to use the Accessibility Checker. After you create the table in the Canvas Rich Content Editor, use the Accessibility Checker to add the appropriate table header information.

  1. Create your Canvas page and then create a table.
  2. At the bottom of the editor, select the Pope Tech Instructor Accessibility Guide.

Color

Color can be an effective method to communicate ideas and draw attention to information. Ensuring there is sufficient contrast as well as using color in combination with text formatting can support a diverse campus community, including individuals with visual disabilities.

Text and background color buttons highlighted in rich content editor.

Contrast

When choosing colors to present text information in documents, avoid pastel colors or the “light” version of a particular color. Such color options do not provide sufficient contrast against a white background. Contrast ratios should be the following:

  • 4.5:1 for regular text
  • 3:1 for 18 point font and larger, or 14 point font and bold

Contrast ratios may be evaluated using tools such as:

Color and Formatting

When using color to indicate a specific condition or state, include text formatting to provide a distinguishing characteristic. For example, if a list of vocabulary words were identified only in red text, this could present difficulties for an individual who has a type of color-blindness.

Use color and formatting to support accessibility, such as:

  • Red text with Bold formatting
  • Using an asterisk, brackets, or other annotation symbols in addition to color
    In addition to color, an asterisk is used to indicate emphasis.


Canvas Text Color Guide

This infographic provides a guide of text colors accessible on Canvas’ white background and text colors accessible on black backgrounds as guidance.
= accessible colors
o = colors that are accessible only for large text (Header 2, or 18pt and larger)

Accessible text colors on white and black backgrounds.

Hex Code Option Now Available


The new color palette allows for customized colors. Using the Hex code along with a color contrast tool can help you identify an appropriate color combination.

  1. Select Text color.
  2. Select Custom color.
  3. The Color Picker dialogue box should appear with the option of entering either the decimal or hex code. Select Save.
Color Picker palette allows content authors to customize colors, then select Save.

Canvas Quiz and Extra Time

Some students may require additional time on a Canvas Quiz. Instructors can modify Canvas Quiz settings to allow for multiple attempts or to support students approved for an extended time. Please see the Canvas Instructor Guide: How to grant extra time or attempts in a quiz.

Captions and Audio Descriptions Concept

Captions

Captions are the display of text on-screen representing the dialogue and sound effects present in a video. Captions are synchronized with the video presentation and provide an accessible alternative for individuals who cannot hear the content. Captions include any spoken information as well as all relevant parts of the soundtrack, including background noises, sound effects, speaker identification, and any other audio cues that help the viewer understand the video.

Transcripts, unlike captions, are a text alternative to audio files, such as a podcast or pre-recorded radio show, and are not synchronized with the presentation. Transcripts should include speaker information or any other informational cues appropriate to understanding the recording. While transcripts may be provided for pre-recorded videos, they must be provided for audio-only content.

Guidance

Captions Quality

The Captioning Key from the Described and Captioned Media Program provides specific guidance for producing quality captions for video presentations:

While auto-generated captions have made significant progress, they are still not as accurate as those produced by a professional captioner and may include critical errors that impact the information or context of what is communicated. Such errors may include incorrect text, a lack of correct punctuation and grammar, and missing speaker identification. Auto-generated captions may be used as a starting point from which to edit and create a more accurate captioned video.

Audio Descriptions

Audio descriptions provide a verbal depiction of the key visual elements in a video presentation. For individuals who are blind, visually impaired, or unable to view the video directly, audio descriptions communicate the important information relevant to understanding the video content. For example, a video may display a speaker’s name and title or specific instructions to follow. If this information is not included as part of the spoken dialogue, then it needs to be communicated as part of a separate audio description.

The Description Key from the Described and Captioned Media Program provides guidance for how to produce audio descriptions, including what to describe and how to describe on-screen information:

Recommended approach for existing videos

Please contact Aaron Holmes, Interim Access Specialist at aholmes@miracosta.edu.

For new videos

One solution is to write your script so that any relevant on-screen information or cues are described in the spoken dialogue of the video, thus reducing the need for a separate audio description.

1 2