Creating Accessible Canvas Pages

Heading Styles and Content Formatting

  • Use proper heading levels (H1, H2, H3, etc.) to organize content hierarchically. Beginner's Accessibility with the Rich Content Editor
    • Use the Headings in order - In Canvas, the list starts with Heading 2, because Title and Heading 1 are already used in the standard Canvas layout. For example, sample Headings could include: Overview, Introduction, Instructions, Examples, Grading. 
  • Use built-in styles for bold, italics, and underline instead of relying on color alone. For example: Instead of using red text to highlight important information, use bold formatting.

Lists

  • Use numbered lists for sequences and bulleted lists for items without a specific order. For example: Use a numbered list for step-by-step instructions and a bulleted list for a list of resources. Making Lists Accessible in Canvas

Links


Tables

  • Use tables for data, not for layout. For example: A table showing class schedules with columns for date, time, and topic. Table Accessibility in Canvas

Images and Multimedia

  • Add alt text to all images that convey meaningful information. The alt text should be descriptive and convey the image’s purpose. For example: Alt text for a chart: "Bar chart showing enrollment numbers from 2019 to 2023". How do I manage alt text and display options for images embedded in the Rich Content Editor as an instructor?
    • Ensure that each image has descriptive alt text.
    • Alt text should convey the essential information or function of the image.
    • Keep alt text concise but informative (typically under 125 characters).
      Avoid phrases like "image of" or "picture of" as screen readers automatically announce it as an image.
  • Mark images as decorative that are purely decorative and do not convey any meaningful information.
  • Provide captions for all videos and include transcripts for audio content. For example: A video lecture should have captions and a text transcript available.

Specific Tools and Features

  • Use the built-in accessibility checker before publishing content. For example: Run the accessibility checker after creating a content page to ensure compliance. How do I use the Accessibility Checker in the Rich Content Editor as an instructor?
  • Use high-contrast color schemes. For example: Black text on a white background. WebAIM: Contrast Checker
  • Ensure all interactive elements are accessible via keyboard. For example: Test navigation through a content page using only the keyboard. WebAIM: Keyboard Accessibility
  • Specify the primary language of the content page. For example: Indicate that a Spanish-language page is in Spanish.
  • Use screen readers to test content. For example: Ensure all content is readable and navigable with a screen reader.

Resources