How do I Create Accessible Content in Canvas?

Quick Links: | Canvas Accessibility Checker | Structure Content Properly | Add Alternate Text | Ensure Accessible Documents | Convey Information Without Sensory Cues Alone | Check Color Contrast | More Resources |

Creating an accessible learning environment is not just about compliance with legal standards; it’s about ensuring every student has an equal opportunity to thrive in their educational pursuits. The necessity of ensuring equitable access to online educational resources has never been more paramount. This comprehensive guide outlines practical and effective strategies for creating accessible content in Canvas LMS, offering step-by-step instructions, resources, and support to guide you on this journey of inclusive education.

Accessibility is for Everyone and is Everyone’s Responsibility

Access to education is a right for everyone. Ensure the content you create in Canvas is accessible to all, helping each student to realize their full potential. Equitable access to course materials is a right for all.

What Can You Do?

• Familiarize yourself with the Accessibility Resource Center for information about your role, tips, and strategies.
• Participate in faculty learning communities and QLT workshops to increase your knowledge about universal design and accessibility.
• Reach out to the Technology and Learning Program for assistance in making your course content accessible.

Did You Know? Chico State's Technology & Learning Program offers services to improve the accessibility for your course content including in Pages, Documents, PowerPoints, PDFs, and more. Request remediation of your instructional materials.

What Happens if my Content isn't Accessible?

If your content isn’t accessible, it can lead to a multitude of negative consequences for both you as an instructor and your students:

• Barrier to Learning: Some students may find it impossible to access or understand the course material, leading to a significant disadvantage in their learning experience.
• Impact on Academic Performance: Inaccessible content can adversely affect students’ grades and overall academic performance, as they may not have equal access to the information and resources they need to succeed in the course.
• Increased Workload Later: Retrofitting content for accessibility later is often a more time-consuming and complex process compared to integrating accessibility from the beginning.
• Negative Reputation: Inaccessible content can damage the university's or your reputation. Prospective students may choose other institutions with a better track record for accessibility, leading to a decrease in enrollment and funding.
• Legal Repercussions: Inaccessible content may result in violations of laws and regulations related to disability rights and education, like the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act.

Use the Canvas Accessibility Checker

Don’t fret about how to check the accessibility standards of your course. Canvas has tools available to make this task easier for you.

How to Use the Accessibility Checker:

1. Navigate to your Course:
   • Log into Canvas.
   • Select your course from the dashboard.
2. Open the Editor:
   • Choose any page or content area.
   • Open the Rich Content Editor.
3. Run the Accessibility Checker:
   • Click on the person icon within the editor toolbar.
   • Review the issues listed and follow the provided steps to fix them.
     

Address issues in these areas:

• Missing alt text for images
• Improper heading order
• Tables without headers
• Low color contrast
• Lack of descriptive links
• Lists
• Audio and Video

Structure Content Properly

Effective structure is the backbone of accessible content. It allows students using screen readers and other assistive technologies to navigate through the content easily and understand the organization of the material. Below are the enhanced steps to ensure your content is properly structured:

Headings

Proper heading structure is critical for helping all users navigate your content. Assistive technologies use headings to identify and navigate sections of a page.

Steps to Apply Proper Headings:

1. Use Heading 1 for Titles:
   • Only use Heading 1 for the main title of the page or document.
   • Avoid using it for other parts of the content to ensure a clear hierarchy.
   • In Canvas, this is done automatically for you using the page title.
2. Utilize Heading 2 and Heading 3 for Subsections:
   • Use Heading 2 for main sections and Heading 3 for subsections within those main sections.
   • Continue this hierarchy as needed, using Heading 4, Heading 5, etc., for deeper subsections. Note: Canvas only allows you to use up to Heading 4 for content in the Rich Content Editor. If deeper nesting is needed, consider adjusting your content or editing the HTML directly.

Tools and Tips:

• In the Canvas Rich Content Editor, use the paragraph formatting dropdown to select the appropriate heading level.
• Ensure that heading levels are not skipped; headings should follow a hierarchical structure (like a textbook outline).

Lists

Properly formatted lists help students understand the organization of the information and make the content easier to follow.

Steps to Create Proper Lists:

1. Use the List Function:
   • In the Rich Content Editor, use the list button to create numbered or bulleted lists.
   • Avoid creating lists manually with dashes or numbers.

Tools and Tips:

• Ensure each item in the list is concise and clear.
• Use nested lists to show hierarchy or sub-points within a list.

Captions

Adding captions to tables, figures, and images enhances understanding and provides context to all students, including those using screen readers.

Steps to Add Descriptive Captions:

1. For Tables and Figures:
   • Use the caption or title feature in the editor to add descriptive captions.
   • Clearly describe the content and context of the table or figure.
2. For Images:
   • Add alt text that describes the image content and function.
   • If the image includes text, the alt text should contain the same words as the image.

Tools and Tips:

• Ensure captions and alt text are concise yet descriptive.
• Use plain language to enhance understanding.

Add Alternate Text

Ensuring that all visual and auditory content on your Canvas site is fully accessible is crucial for inclusive education. Alternate text (alt text) provides descriptive information about visuals and auditory content, aiding students who use screen readers to access and understand the content better. This section provides a step-by-step guide to adding alt text to images, videos, and audio files in Canvas.

Why Alternate Text Matters

Thoughtful alt text provides important supplemental content and context for images, videos, and audio. It's a key component of course accessibility and inclusion. As an instructor aiming to share knowledge equitably, ensuring that alt text is present is an impactful step to aid comprehension. Alternate text provides the following benefits

• Accessibility: Alt text provides a text alternative to visual content for people who are blind or have low vision who use screen readers to have content read to them. Without alt text, images are invisible to your students using screen readers.
• Broken images: If an image fails to load, the alt text will be shown in its place so your students still get a sense of what the image conveys.
• Context: Alt text provides context and clarity about an image that may be ambiguous on its own. Good alt text succinctly summarizes what the image conveys.
• Visual consistency: Alt text ensures a textual representation of important images so the content makes sense when read aloud or accessed without visuals.

Images

Providing alt text for images ensures that students using screen readers can understand the content and context of the images used in the course material. Follow these steps to add alt text to images in Canvas:

1. Navigate to the Image:
   • Open the page containing the image.
   • Edit the page in the Rich Content Editor
2. Open Image Options:
   • From the Rich Content Editor, select the image [1].
   • Select Image Options [2].
3. Enter Descriptive Alt Text:
   • From the slideout menu, enter a concise description of the image into the Alt Text field [3].
   • Describe the image in a way that conveys the same information as seeing the image would.
   • If the image includes text, the alt text should contain the same words as the image.
   • Select Done [4] to save your changes.
     

Additional Tips for Alt Text for Images:

• Be specific and succinct in your description.
• Avoid phrases like “image of” or “picture of” as screen readers already identify the content as an image.
• If the image contains text, include the text in the alt description.
• If the image is purely decorative and conveys absolutely no information, mark the image as decorative.

Videos/Audio

All videos and audio files should have accurate captions or transcripts to make them accessible to students who are deaf or hard of hearing, or who process information better in text format. Descriptions of videos and audio can convey important information to someone who cannot hear audio or video content. This allows deaf users to get key information that is communicated visually. This is also useful for students who may be viewing the content in a noisy environment or without video or audio capabilities.

• Upload your videos and audio to Kaltura and transcripts will be automatically generated. Zoom meetings recorded to the cloud are automatically transferred to Kaltura.
• If needed, you can edit the captions in Kaltura to improve the accuracy of the captions and transcript.
• For longer, videos and audio content, consider embedding them in a page in Canvas and including an equivalent written transcript with headings and appropriate formatting.

Ensure Accessible Documents

Ensuring your documents are accessible is a crucial step in making your Canvas course inclusive for all students. Before uploading any document into Canvas, make sure it adheres to accessibility standards to accommodate students with various needs and disabilities. This section will guide you through some basic steps and tips to make your documents more accessible.

1. Use Simple, Clear Fonts

• Why It’s Important: Clear and simple fonts enhance readability, ensuring that all students, including those with visual impairments or learning disabilities, can easily read the text.
• How to Implement:
  • Opt for sans-serif fonts (e.g., Arial, Calibri, or Helvetica).
  • Avoid using complex script or decorative fonts for body text.
  • Ensure a minimum font size of 12pt.

2. Use Headings Correctly in Word and Other Text Editors

• Why It’s Important: Correctly used headings provide structure to your document, making it easier to navigate and understand. Microsoft Word and Google Docs use the headings to automatically generate an outline of your document for easy navigation.
• How to Implement:
  • Use the “Styles” feature in Word to format headings.
  • Start with "Heading 1" for the title, followed by "Heading 2" for major sections, and "Heading 3" for sub-sections.
  • Avoid manually changing the font size and boldness to create headings.

3. Include Alt Text for Images and Charts in Documents

• Why It’s Important: Alt text provides a text alternative for images and charts, making them accessible to students using screen readers.
• How to Implement:
  • Right-click on the image or chart in your document.
  • Select “Edit Alt Text” (in Microsoft Word) or a similar option in other text editors.
  • Provide a concise, descriptive alternative text that conveys the same information as the image or chart.

4. Use Descriptive Hyperlinks

• Why It’s Important: Descriptive hyperlinks give context, making it clear where the link will lead, which is helpful for all students, especially those using screen readers.
• How to Implement:
  • Avoid using generic text like “click here” for hyperlinks.
  • Instead, use descriptive text that explains the link destination, e.g., “For more information, visit the Accessibility Resource Center.”

Convey Information Without Sensory Cues Alone

Effective communication in an online learning environment often depends on various sensory cues. However, reliance on a single sensory cue like color or sound can hinder the understanding of students who have sensory impairments. To ensure that your content is accessible to all, use diverse methods to convey information. When possible, present information in more than one mode or format. For instance, if you have a video, provide a transcript. If there's an infographic, provide a textual summary.

Why Is This Important?

• Diverse Learning Styles: Students have varied learning styles and preferences. Some may prefer visual content, while others benefit more from auditory or text descriptions.
• Accessibility: Students with visual or hearing impairments will miss information conveyed through only visual or auditory cues.

Visual Cues

• Avoid Color-Only Indications: Don’t instruct students with statements like "click on the green button" because students who are color-blind or using screen readers may not discern the 'green' button as you intend. Instead, be specific in your instructions, such as "click the 'submit' button."

• Symbols and Icons: If you're using symbols or icons, always accompany them with a text label or description. For instance, if you have a bell icon for notifications, ensure there's text nearby or a tooltip that says "notifications."

Auditory Cues

• Provide Transcriptions: If there's essential information in an audio format, always include a text transcript or closed captions. Upload your videos and audio to Kaltura and transcripts will be automatically generated. If needed, you can edit the captions in Kaltura to improve the accuracy of the captions and transcript. For longer, videos and audio content, consider embedding them in a page in Canvas and including an equivalent written transcript with headings and appropriate formatting.

• Avoid Sound-Only Instructions: Avoid using phrases like "listen for the bell, then proceed." Instead, combine this with a visual or textual cue: "When you hear the bell or see the 'next' button illuminate, proceed."

Consistency is Key

Consistent design helps students to navigate the course easily, find materials quickly, and focus on the learning rather than getting lost in the course structure. Keep layouts, icons, and navigation consistent throughout the course. Not only can the consistency be helpful for students with cognitive disabilities, all students benefit from a consistent course design. Consider the following tips:

• Ensure that the course navigation menu is streamlined and organized. Limit the number of links in the navigation menu and group related items together. For example, if you're using modules, consider hiding redundant navigation items like Assignments, Discussions, Files, and Pages.
• Consider creating and using a template for similar pages or sections within the course. For example, each module’s introduction page should have the same layout.
• Use clear and descriptive names for course elements, such as modules, pages, assignments, and discussions.
• Clearly state your expectations, guidelines, and instructions in the same section of each module or assignment.
• Regularly review your course to ensure that the design remains consistent, especially after adding new content or making updates.

Use Descriptive Link Text

Instead of hyperlinks that say "click here," use descriptive text like "read more about Canvas accessibility." This assists screen reader users in understanding the link’s purpose.

Check Color Contrast

Contrast in the context of web and digital accessibility refers to the difference in color between text (or anything in the foreground) and its background. Ensuring that there is sufficient contrast between the text and background colors is vital for the readability of the content, especially for users with visual impairments.

How to Check Color Contrast

• Manual Checks: Visually inspect the contrast between text and background colors.
• Automated Tools: Use online tools like the Color Contrast Checker to ensure your text and background colors meet the accessibility standards.

Importance of Contrast

1. Visibility for Low-Vision Users: High contrast helps individuals with low vision to read and understand the content better.
2. Color Blindness: Adequate contrast assists individuals with color blindness in distinguishing text from the background.
3. Aging Eyes: As people age, the eyes become more sensitive to light, and higher contrast helps in enhancing visibility.

Types of Contrast

1. Color Contrast: Refers to the difference in light between the font (or anything in the foreground) and its background.
2. Size Contrast: Involves using different sizes to emphasize the importance of particular elements. For example, notice how the headings in this document create a sense of visual hierarchy, allowing information to be easily identified.
3. Contrast in Style: Involves utilizing various styles (bold, italic) to make certain text stand out.

Tips for Ensuring Adequate Contrast

1. Avoid Light Text on Light Background: Opt for dark text on a light background or vice versa.
2. Consider Size and Weight: Large, bold text can be more legible at a lower contrast ratio.
3. Test Your Design: Test your design with real users to ensure the contrast works for everyone.

More Resources

• The Basics and Importance of Color Contrast for Web Accessibility

We’re Here to Support You—Don’t Hesitate to Ask for Help

Lean on the support of the Technology & Learning Program. Utilize workshops, trainings, and special events, TLP's live virtual support room, and schedule a one-on-one consultation with an instructional designer to ensure your courses are fully accessible.

Your commitment to creating accessible content in Canvas makes a world of difference to all students, ensuring that everyone has equal opportunity to learn, grow, and succeed.

Dive Deeper

• Use the Ally Course Report to quickly identify and fix potential accessibility issues
• Beginner's Accessibility with the Rich Content Editor
• Make your Word documents accessible to people with disabilities
• Accommodate students who need exta time on quizzes and exams with Accommodate HQ