Canvas Accessibility

USING THIS PAGE

Canvas Logo

Canvas is a sophisticated tool for creating and presenting instructional content, so we need to think about how students see the information, how they will use it, if they can understand it, and how they interact with it.

The sections below cover using the built-in accessibility checkers, what to check for when formatting text in Canvas, and how accessibility is considered in organization and design.

You can find the complete Canvas accessibility standards guide here.


  • Formatting Text Content

    Below are guides for applying specific Digital Accessibility standards in Canvas.

    This 10 minute overview video "How Do I Make a Canvas Page Accessible" demonstrates various accessibility features you might come across when creating content in Canvas.

     

    • Applying Heading styles

      What to look for:

      • In Canvas, the Page or Item Title is treated as Heading 1, while content headings begin with Heading 2.
        • Screenshot of the Canvas Rich Content Editor, with the Heading Styles dropdown menu open.
      • Organize headings in order and avoid skipping levels.
          • (H3 only after using H2, etc.)
      • "Paragraph" refers to regular text without any headings and is the default text style.
      • Break up the page content into smaller sections for better readability.

      How to apply Headings in Canvas:

    • Colors have sufficient contrast and are used appropriately.

      What to look for:

      • Don’t rely on color alone to indicate actions, responses, or specific designations.
        • For example, avoid using colored text or highlighting as the only way to emphasize information.
      • Underlining and use of blue text should be only be used for hyperlinks.

      How to check colors for sufficient contrast:

      • If you're using the default Canvas color palette, use black, dark orange(#ba372a), dark purple (#843fa1), or dark blue (#34495e) for any text on a white background.

      Graphic showing which of the default canvas palette images allow for suitable color contrast against white and black background.

      • Use a tool like the WebAIM color checker or Color Contrast Analyzer to check for contrast (with a minimum ratio of 4.5:1)
      • Keep an eye on the Accessibility Checkers—they will notify you if the text in the Rich Content Editor has insufficient contrast.
      Screenshot of the Canvas Rich Content Editor. Orange text has been used and is being recognized by the accessibility checker.
      Screenshot of the Canvas Panorama checker displaying a warning about insufficient color contrast.
    • Images have appropriate alt text

      Alt text should be short and explain the purpose of an image; it isn’t necessary if the information is already included in the document text.

      What to look for:

      • For images that contain text, include a text-based equivalent.
      • Decorative images should be labeled as such.
      Thought bubble with Question Mark
      1. If I remove this image from the document, what text would I add instead?
      2. How would I explain the purpose and function of the image to someone over the phone?

      How to add alt text to images:

    • Course and External links self-describe

      A "self-describing link" is one where the purpose of the link can be understood just from the link text. Avoid using unnecessary phrases like "click here" or "more" as link text in most cases.

      In most cases, the proper link text is probably already in your content, and it just needs to be emphasized as the link.

      For example:

      Self-describing links are crucial for screen readers and help all users understand the purpose and context of the information presented.

      Working with links in Canvas:

      In Canvas, you can use the Rich Content Editor (RCE) to link to other course elements and external URLs.

    • Accessible Tables and Lists

      Tables

      What to look for:

      Avoid using tables to organize or structure information; numbered or bulleted lists and paragraphs with Headings are generally more accessible.

      It might be tempting to use an 'invisible' table in Canvas to arrange content on a page, but avoid this! If you have a specific layout in mind, please reach out to eLearning for help with finding or building an accessible version.

      How to build accessible tables in Canvas:

      Lists

      Lists can be a more accessible alternative to simple tables and help make text content easier to read for all users.

      • Use the RCE list tool to format your lists correctly; avoid using the number keys and spacebar to create them.
      • Consider the content: the two most common types are ordered and unordered.
        • Use ordered lists (numbers or alphabetical sequences) when the order of the items is important
        • Use unordered lists (bullets or dashes) when the order doesn't matter.
  • Accessibility Principles in Canvas Design

    One of the WCAG's guiding principles for digital accessibility is that content needs to be Understandable - it should support learner's understanding through consistent and predictable design.

    This section will guide you through how to address this component of Digital Accessibility when structuring content in Canvas.

    • Reducing cognitive load

      What is cognitive load?

      Cognitive load refers to the use of working memory that is not related to learning content. In this case, it describes the mental effort required to navigate and understand content presented online.

      In simple terms, it’s about how much effort it takes to figure out how to navigate a specific website.

      When designing courses for students, our goal is to be intentional in our choices to reduce cognitive load as much as possible.

      How to do this in Canvas:

      • Make things very clear to students.
        • Ensure that students know how to get started, navigate the course, where grading happens, and what they can expect from you.
      • Avoid unnecessary elements.
        • Focus on information, visuals, and additional materials that support the unit objectives so students can easily identify what’s truly important.
      • Use common design patterns.
        • Whatever naming convention or organizational methods you use, keep them consistent and logical.
      • Eliminate unnecessary tasks.
        •  If you’re unsure about what needs to be included, refer back to the objectives and remove any content that doesn't help students master those goals.
        • Reduce clicks and minimize distractions by building content directly in the LMS when possible and embedding external content instead of linking to it.
      • Make readability a priority.
        • Readability is always more important than aesthetics.
          • Simple black text on a white background will never look dated or perform poorly.
        • Use Headings and break information into smaller sections with paragraphs, line breaks, and lists.
        • Screenshot of the Panorama Web Accessibility icon as it would appear in Canvas: a COCC blue circle with the ADA figure in the middleIntroduce students to the Panorama Web Accessibility Tool, which allows students to customize the text display in Canvas and access other web-reading tools.
    • Navigation and labeling is consistent

      Students should not need to make major personal adjustments to easily perceive and navigate the LMS.

      How to do this in Canvas:

      • Use a Getting Started page
        • Introduce students to the course and guide them on how to navigate the content.
      • Be consistent with naming conventions
      • Utilize Course Links and ensure links self-describe.
      • Separate reference material
        • Keep general resources that aren't specific to a weekly module in their own space.
      • Hide unused menu items
        • Remove anything students won't use, or that you only want them to encounter as they progress through a module. 
    • Content supports diverse learners

      Students engage with instructional content in various ways, sometimes differently than instructors intend.

      Canvas content is often accessed via mobile devices, which can change how content appears and how easily students can interact with it.

      How to do this in Canvas:

      • Build content natively
        • Whenever possible, create content directly in Canvas so students don’t have to download files to view it.
      • Encourage students to use Panorama 
        • Panorama provides access to alternative formats like .mp3 and .EPUB at the click of a button.
      • Share files in common formats
        • Use formats are either system-agnostic (like PDFs) or MS Office, which are free to students.
      • Upload low-bandwidth alternatives
        • Provide lighter versions of "heavy" files (e.g., offer both the original PPT and a PDF version).
      • Use Student View to review your course
        • Open your course on a phone or tablet to see how it appears and functions in a different environment.
  • Media and External Tools

    This category includes audio and video content, as well as other digital course materials created outside of COCC.

    For audio and video accessibility, it's important to present content in a way that allows students to interact with it without needing special tools. This means including closed captions or transcripts and ensuring that the platform lets users play and pause the content freely.

    The three most common multimedia hosts used at COCC are Kaltura, Youtube, and Zoom.

    Expand the menu below to to learn how to meet accessibility standards with each tool, and visit our Video and Media for Instructors page for more details on when to use each option.