Canvas (courses)

Headings help organize your document. They make digital content accessible by breaking up longer sections and giving meaningful structure to documents. Headings are not just styled bigger and bolder, but are marked up in the code and can be navigated with assistive technology tools.

How Heading Structure Works

A document’s heading structure acts like an outline, organizing content into different levels of importance. The main title (Heading 1) introduces the overall topic, while subheadings (Heading 2 and below) break the content into sections and details. This hierarchy helps readers scan and understand the relationships between sections. 

Why Heading Order Matters

Heading structures must follow a logical sequence to guide the reader smoothly. Skipping heading levels (like jumping from Heading 1 to Heading 4) disrupts this flow and makes it difficult for readers, especially those using screen readers, to understand the document’s organization. Heading 2 should follow Heading 1, and Heading 3 should only be used within sections introduced by Heading 2.

1. Select the text you wish to modify.
2. Then click the Paragraph drop-down menu. 
3. Select the text style you want to use. Choose from Heading 2, Heading 3, Heading 4, Preformatted, and Paragraph styles.

Note: By default, the primary heading for the announcement, assignment, discussion, page, or quiz is the same as the title or name you enter when creating the item.

Typographical choices such as the size, shape and formatting can have a big impact on all users’ ability to read and understand information, as well as on users with dyslexia or other reading impairments. Additionally, assistive technology may not be able to convey when certain text formatting or symbols are used.

• Fonts should be easy to read, with sans serif fonts (e.g. Tahoma, Arial, Calibri) used for the body text
• Font size should be at least 12pt
• Avoid using ALL CAPS
• Avoid making text full-justified; align text to the left or center instead
• Avoid using underlined text for emphasis, as it may be confused with hyperlinks and can reduce accessibility.
• Information conveyed by text formatting (bold or italics, highlighted or strike-through) or symbols should be available through other accessible means.
  • Bad Example: This example highlights and bolds an important update, which may not be read by assistive technology and doesn’t clarify its significance.
  • Good Example: Important Update: This example adds text to supplement the visual indications of importance which can be read by assistive technology and conveys the significance in a useful way for all users. 

Color

Color makes content accessible by emphasizing visual elements (icons, text, labels) to communicate meaning. Color cannot be used as the only way to communicate meaning or an important change, because not everyone can see color differences.

Contrast

Contrast is the difference between the lightness and darkness of two colors. Good color contrast makes content accessible by making text and controls easier to see and read. Accessible contrast benefits people who have various types of colorblindness, have low vision, are neurodivergent, or are viewing content in different lighting conditions.

Contrast Checker Resources:

When reviewing existing content, visually scan text and controls for low contrast. Any combinations that look low contrast should probably be improved.

To check the contrast value between two colors, use the WebAIM Color Contrast Checker. The checker will calculate the value and tell you if itpasses or fails.

Plain language is writing that is easy to read and understand. Plain language makes content more accessible to everyone, and it can be used in different contexts. 

Make your writing more understandable by being concise, organized, clear, using common words, defining acronyms and avoiding jargon. For additional help use the Hemingway Editor and get a reading level score and other suggestions or Digital.gov’s Plain Language Guide.

Alternative text, or alt text, is a short description of an image. Alt text makes images (photos, diagrams, logos) accessible by providing a meaningful text alternative for people who can’t see, access, or process the original image. Alt text is not the same as an image caption, but is added in the document’s code and usually not displayed.

Good alt text is accurate, short, contextual, and not repetitive.

• Accurate
  • Correctly describes the content or purpose of the image
• Short
  • Not longer than it needs to be
  • A few words to a few sentences, usually limited to 150 characters
• Contextual
  • Communicates the purpose of the image in context
  • When writing alt text ask yourself, Why is this here? Not just, What does this show?
• Not repetitive
  • Does not begin with “image of,” because assistive technology already identifies the image as an image
    • Can describe format or genre, such as “photograph of students lounging near Diag,” “pencil drawing of students at a table studying”
  • Does not repeat description provided in the caption or surrounding text

Alt Text Example:

Bad Alt Text: George Washington
Good Alt Text: A painting by artist Emanuel Leutze of George Washington crossing the Delaware River

1. Insert your image into your course.
2. Click the image [1], then click the Options link [2].
3. You can manage display options for embedded images in the Image Options menu [3]. Enter an alternative text description in the Alt Text field. By default, the Alt Text field displays the image file name.
4. If the image is decorative and does not require alt text, select the Decorative Image option.

Links let users go to a new page or place on the web or in a digital document. Links make content accessible by making it clear where each link goes, with good link text.

Accessible link text is short, descriptive, understandable, and unique:

• Short — Just a few words, no more than 5 if possible
• Descriptive — Describes where it goes or what it does, so a user knows what will happen in advance
• Understandable — Text that is readable for humans, not a long URL string
• Unique — Not the same as other link text on the same page or document, unless it goes to the same place

Avoid phrases that are meaningless out of context such as “more,” “click here,” or “this article.” These links are confusing to people who are visually scanning content, or browsing content by links only with assistive technologies including screen readers.

Lists make content accessible by breaking up sections, letting readers know that items are related, and making content easier to navigate. Lists are not just visually styled, but are marked up in the code and can be navigated with assistive technology tools.

When creating lists, use built-in tools to format your text as a list. Don’t just start new lines, or input special characters in place of bullets or numbers.  Learn more about using lists in Canvas.

There are two types of lists:

• Unordered lists (with bullets) for items that have no particular order
  • Use in general, unless order is required
• Ordered lists (with numbers) for items that have a sequence or order
  • Use for steps in a process, instructions, or ranked items
  • Do not use when order is not important

Tables are used to display tabular data, in rows and columns.Tables make content accessible by simply showing the relationships between many data points. Accessible tables are not just visually styled, but are marked up in the code and can be navigated with assistive technology tools.

Tables should be simple with one clear heading column and/or row and no merged cells. To ensure your tables are accessible, remember to only use tables for displaying data and information. Do not use tables to create layouts for your pages as this causes issues for students who use assistive technologies.

An accessible table in Canvas includes the following elements: 

• a caption
• a header row
• Header columns (if applicable)

Complex Table Example:

In this example, there is a compound header with merged cells, as well as a merged cell in the data cells. A screen-reader would not be able to correctly associate the headers with the information included. Part of the merged cells would read as ‘blank.’

Simple Table Example:

Adding a column for the subject eliminates the need for the compound heading and separating all the merged cells makes it possible for a screen-reader to associate headers with data and allow users to follow the information through audio. (Note: the header row would need to be set as a header for it to associate down to the cells below).

1. In Course Navigation, click the Accessibility link on the left menu. Then, click the Scan Course link or the Scan Course button.

2. After the scan is complete, you will see a number of issues that need to be fixed, grouped by resource. (Note: The scan can take anything from a few seconds to a few minutes depending on the size of the course.) 

3. To launch the radiation wizard for viewing and resolving issues on a resource, click the Fix button. 

4. A tray then displays one issue at a time, showing the problem area and issue description. Select a remediation option. 

5. To correct the issue, click Save & Next.

6. To dismiss or exclude issues and resources you do not wish to remediate, click the Close remediation button. You can also exclude issues by clicking the Options three dots (•••) icon, and clicking the Close remediation button.

Resource:

Using Canvas Accessibility Checker