You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
You are viewing the article in preview mode. It is not live at the moment.
Home > Canvas User Experience > Accessibility & Usability Overview
Accessibility & Usability Overview
print icon

Why do I need to pay attention to accessibility?

Accessibility ensures that all of your students are able to access your course materials and use them as needed. Legally, FSU is required to have both internal and external departmental materials be fully accessible so that everyone is able to access and use these materials as required to fulfill their employment responsibilities and/or pursue their academic studies regardless of any visual, auditory, physical, speech, cognitive, or neurological disabilities (About the new Accessibility Standards). The Office of Digital Learning can provide guidance in designing accessible online courses, but accessibility is ultimately the responsibility of the course instructor. We strongly recommend adopting the principles of universal design, which means proactively creating materials that are accessible to everyone. We believe this method is far better than the reactive "provide accommodation when needed" approach. 

Though proactively making course materials accessible may be time consuming, the process can benefit the instructor as well as the student. Remediating course materials can be a learning experience that allows the instructor to encounter their own content from the point of view of the student. This blog post on Accessibility, Audio Texts, and the Persistence of Print from The Chronicle of Higher Education demonstrates one instructor's insight on aural learning in the context of accessibility.

Ultimately, creating course content with accessibility in mind and remediating existing course content results in a better quality course experience for everyone. The following tools and resources are available to help you strive toward meeting accessibility standards to improve learning for all students.

Guidelines

The guidelines here address both the design of your course site and the format of materials you include in your site, such as any media (audio, video, images, tables, diagrams, formulas and equations), documents, and presentations.

Overall Course Site Design

Canvas as a Learning Management System is accessible, however there are still some additional considerations you should take into account when building your Canvas course site.

General Principles

  • Go for a clean look.
    Limit the navigation items to only those course content items that students will use. This helps to avoid a cluttered course navigation menu. Keep in mind: Excessive menu items or decoration can be confusing, and can make things harder to find, download, and use. In all areas of your course try to avoid flashy colors, ornamental clip art, video for its own sake, and other things that merely "look cool." Avoid moving, blinking, or scrolling text. Keeping things simple makes it easier for students to access your content.
  • Use descriptive names for files and maintain consistent naming conventions between syllabus and course content.
    E.g., don't call an assigned reading "Case Study: Impact of Social Media on Arts Engagement" in your Syllabus and then call that file "Case Study #1" in your course site.
  • Consider how students experience course material
    Keep the course design free of extraneous graphics, borders, etc., and navigation schemas intuitive and simple. Save files in accessible formats. If you use PDFs, make sure they are legible, the pages are rotated correctly, and the file size is reasonable.
  • Use sans-serif fonts for body text in Canvas content pages.
    (e.g. Arial, Verdana, or Lucinda Sans). Be consistent with font choices and colors. Typically, black text on a white background offers the highest contrast and is therefore the most accessible. For more information on color contrast, see use of color below.
  • Make your site usable by putting yourself in the student's position.
    Be empathetic and do real-world testing (perhaps even a pilot) of your course.
    • What will they see first?
    • How will they know what to do next?
    • Can you follow your instructions for posting discussion threads?
    • Can they get the software they need to read that PowerPoint file?

Navigation

Keep navigation of your course site logical.

  • Go for a minimalist course navigation menu. Limit the available navigation items to only those course content items that students will use. This helps to avoid a cluttered course navigation menu. Keep in mind: Excessive menu items or decoration can be confusing, and can make things harder to find, download, and use.
  • Keep your structure parallel. If Week 1 contains a document called "Introduction to Week 1," don't refer to a similar document in Week 2 as "Exploring the Second Week."
  • Use helpful and clear titles for both Modules and content pages.
  • Group related items together in Canvas Modules and present them in a chronological sequence, as they might be used by students. There's no need to send students to three different course areas to get their lectures, assignments, and web links for Week 5.
  • Keep keyboard navigation in mind. By default, Canvas is navigable by keyboard and so are most webpages. However, external apps that you use as part of your course may not be. It is best to check with the specific vendor of the external app you wish to use to find out about their accessibility. For common external apps used at FSU and their company contact information, see External Apps Supported in FSU's Canvas.
  • Optional: Provide a "module table of contents" option for students anywhere that you use the rich content editor. This is particularly helpful for students using screen reader technology to navigate your course site. You can use Design Tools to put a box at the top or bottom of your content page that has the entire navigation for the module in it, so there is no need to click back or leave the current page to navigate to the next item in the module. See Design Tools: How to add a "module table of contents" option into module items for more information.

Links

Make sure that all links in your course site (links you add to Modules, and anywhere that you use the rich content editor) are formatted as self-described hyperlinks.

 

Incorrect:

  1. Click here to learn more by visiting the Universal Design for Learning (UDL).
  2. Universal Design for Learning (UDL) website: http://udlguidelines.cast.org/?utm_medium=web&utm_campaign=launch&utm_source=cast-news&utm_content=body-text

Correct:

Learn more by visiting the Universal Design for Learning (UDL) website.

 

 

Use of Color

  • Colors should have enough of a contrast to be seen clearly. Anywhere that you use the rich content editor, we recommend that you use Design Tools templates and Design Tools color contrast checker.

    For the tech-savvy: Appropriate color contrast means at least 4.5:1 ratio for normal text and 3:1 ratio for large text. You can use WebAIM's Color Contrast Checker to verify ratios in addition to Design Tools.

  • Avoid red/green and blue/yellow color combinations.
  • DO NOT communication information or emphasis by color and formatting alone.

    Incorrect:

    Name Location Status
    Group 16 New York Functional
    Group 19 Chicago Functional
    Group 13 Washington, D.C. Non-Functional
    Group 17 San Diego Functional
    Group 11 Atlanta Functional

    Red = Category 1; Blue = Category 2; Green = Category 3

     

    Correct:

    Name Location Status Category
    Group 16 New York Functional 3
    Group 19 Chicago Functional 2
    Group 13 Washington, D.C. Non-Functional 1
    Group 17 San Diego Functional 3
    Group 11 Atlanta Functional 2
    Red = Category 1; Blue = Category 2; Green = Category 3 

Course Multimedia

We strongly recommend using Kaltura to manage your course media whenever possible.

Audio

  • Do not use autoplay for any audio items used in your course. Encourage your students to turn off any autoplay settings in their browsers, particularly if you have a number of audio items on the same page.
  • Provide a description/summary of the audio recording.
  • Provide text-based alternatives of the audio recording itself:
    • Include accurate closed captions in your audio recording. Kaltura will add closed captions for you automatically, but it will take at least an hour for the captions to be generated and you will need to double-check the Kaltura captions are accurate.
    • Provide an accurate transcript of the audio items you use, especially if you do not have closed-captions for your audio items. If you use Kaltura and have accurate closed captions, then Kaltura will create a transcript for you. You can download this transcript from the Attachments area of your audio item in My Media.

Video

  • Do not use autoplay for any video items used in your course. Encourage your students to turn off any autoplay settings in their browsers, particularly if you have a number of video items on the same page.
  • Provide alternate description for video: add a verbal/auditory or textual description for any videos that contain scenes/items that are purely visual. This will assist any students who are unable to see the video and thus rely on descriptive audio commentary.
  • Provide closed captions for all videos. Kaltura will generate captions automatically for you, but we recommend double-checking the Kaltura captions are accurate.
  • Can your videos be resized? They can be in Kaltura, but if you are not using Kaltura for your course videos then we recommend that you check to make sure this is possible for other methods of video delivery.
  • For live-recorded content (e.g., watching a live telecast in class), record the video you are watching, and post a transcript of the entire video in your course. The transcript should include descriptions for any purely visual elements in the video. If you are able to, it may be best to upload the recorded content to Kaltura and adjust the automatic closed captions in Kaltura as needed.

Images

  • Provide alternative text that fully describes the image and serves the same purpose as the image. This is especially important for images that convey information (i.e., graphs, infographics, tables, diagrams, formulas & equations, etc.) important to concept mastery.
  • Summarize/describe the information contained in a more extensive image, such as a complex diagram, graph, or table, in addition to using alternative text.
  • Use general language expression of symbolic writing (i.e., 2 + 3 = 5 // two plus three equals five) or use MathML or Latex mathematical equations. Canvas supports both and doing so allows students using assistive technology to examine the equations in more detail.

General Text Recommendations in Canvas

We strongly recommend that you use Design Tools templates and use the Design Tools accessibility checker

  • Use sans-serif fonts for body text (e.g., Arial, Verdana, Lucinda Sans) and use H2 or H3 styles for headers:
    Select the "Paragraph" drop-down in the upper right of the rich content editor, and then select "Header 2" or "Header 3"
  • Use Design Tools templates anywhere that you would use the rich content editor in Canvas. Design Tools templates are accessible, and will make it much easier both to create visually appealing content and verify that your content is accessible. For this reason, we strongly recommend that you use Design Tools templates and use the Design Tools accessibility checker
  • Text size, spacing, flow, as well as the elements on the page should be dynamic/adaptive (i.e., use percentages versus specifying exact sizes whenever possible).
    • Are your students able to resize the text without losing any content or function?
    • Text formatting: do not format text using tabs, spaces, or multiple returns; use space before/after, assign tab values, and use style sheets.
      • Do not use asterisks (*) or hyphens (-) in the place of a bulleted list or ordered (numbered) list.
  • Using Design Tools templates will essentially take care of spacing, resizing, and flow concerns for you, especially when you use the built-in accessibility checker.
  • Color contrast: Is the color contrast of the text easily readable? Use Design Tools color checker to confirm that your content utilizes appropriate color contrast.

    For the tech-savvy: To be fully accessible, text color should be at least 4.5:1 contrast ratio for normal text and 3:1 contrast ratio for large text. Use WebAIM's Color Contrast Checker for confirmation.

  • Provide text that is selectable and stay away from using images of text (e.g., textual pages that are scanned). If you use an image of text, make sure to use alternative text that communicates the exact same text contained in the image (see images).
  • DO NOT communicate information or emphasis by color alone. Color should never be the sole method of conveying meaning. For more information, see use of color.

File Format Accessibility Resources

There are many different file formats to choose from and each one has its advantages and disadvantages when it comes to creating accessible course content. Choosing the most appropriate file format for Canvas course content will enable your students to access materials regardless of their digital platform or location, or if they have any type of disability. Our File Format Accessibility Resources page compares the most popular file formats available in today's technological environment, and offers recommendations to help you choose the most appropriate file format to use when developing your course content. This page also contains links to video tutorials and text-based tutorials to help you both create new accessible files and repair existing files so that they meet accessibility standards.

Communicating with Students

You can use both Canvas's built-in Announcements and Conversations (Inbox) features in addition to Microsoft Outlook to communicate with your students. Make sure that your emails sent via Outlook are accessible, particularly when these emails are being sent to multiple students. For video and text-based tutorials detailing what to watch out for, see Microsoft Outlook Accessibility Resources.

Resources for Accessible Web Design

Because the Worldwide Web is often a highly graphical, visual environment, most accessibility concerns relate to making information more accessible to persons for whom this visual component is not useful. However, additional accessibility concerns relate to those with auditory, mobility, and cognitive impairments. The following sites contain a wealth of information on designing pages for accessibility. The field is so large that considerable time may be required to come to an understanding of the issues, challenges, and solutions.

Accessibility in Distance Learning:

Services at FSU:

General Accessibility Standards:

You may also find the Tips for Getting Started with Web Accessibility resources from W3C useful for additional references.

Feedback
17 out of 19 found this helpful

Recent News View all

    scroll to top icon