{"id":4282,"date":"2022-12-05T08:00:00","date_gmt":"2022-12-05T16:00:00","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/inspire\/?p=4282"},"modified":"2022-12-08T07:52:19","modified_gmt":"2022-12-08T15:52:19","slug":"make-your-canvas-pages-accessible-in-a-few-simple-steps","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/inspire\/2022\/12\/05\/make-your-canvas-pages-accessible-in-a-few-simple-steps\/","title":{"rendered":"Make Your Canvas Pages Accessible in a Few Simple Steps!"},"content":{"rendered":"\n

One of the major advantages of digital learning is that we can ensure our materials are accessible to all students. As such, at Ecampus, we are striving \u2013 and encouraging others to strive \u2013 for universal design<\/a>, that is, design that anyone can use comfortably regardless of any impairments. In past posts, we have covered various ways of improving accessibility in a course, including how to fix PowerPoint or Word files. Today I\u2019d like to focus on making Canvas pages accessible and making use of the on-page Accessibility Checker available in the Canvas Rich Content Editor.<\/p>\n\n\n\n

Common Issues<\/h2>\n\n\n\n

Here are the main things you can do to ensure your Canvas pages (including assignments, discussions etc.) are accessible:<\/p>\n\n\n\n

    \n
  1. Use proper hierarchy of headings and do not skip heading levels.<\/strong> You want to start with Heading 2 (Heading 1 is the title), then subordinate to that will be Heading 3 and so on. This is especially useful for screen reader users because it helps with logical page navigation. Some people choose their headings by the font size \u2013 not a good idea! If you want to adjust the size of your text, use the \u201cFont sizes\u201d option in the editor, after designating the correct heading level.<\/li>\n\n\n\n
  2. Add an alt text description<\/a> to any image or mark it as decorative.<\/strong> This is helpful for screen reader users and people for whom the images are not loading.<\/li>\n\n\n\n
  3. Make the link names descriptive, rather than just pasting the url.<\/strong> For example, you would write Student Resources<\/a> instead of https:\/\/experience.oregonstate.edu\/resources<\/a>. Also, avoid linking \u201cclick here\u201d type of text. This helps screen reader users (which would read a url letter by letter), and it also makes it easier for everyone to scan the page and find the needed information.<\/li>\n\n\n\n
  4. Ensure good color contrast.<\/strong> I often see instructors making their text colorful \u2013 in particular, red seems to be very popular. Indeed, a touch of color can make the page more visually pleasing and help bring out headings or important information! The danger lies in using colors that don\u2019t have enough contrast with the background. This is especially problematic for people with less-than-optimal eyesight, but good contrast really just makes it easier for all of us to read. Also, a word of caution: Canvas has recently rolled out dark mode for mobile platforms and many people like to use it. Some colored or highlighted text may not look clear in dark mode.<\/li>\n\n\n\n
  5. Add caption and header row to tables.<\/strong> These are extremely helpful for screen reader users, and the caption helps everyone to quickly see what the table is about. To add these things, you actually have to rely on the on-page accessibility checker \u2013 it will flag the issues and walk you through fixing them. While we\u2019re on the subject of tables, you also want to avoid complex tables with merged cells because they are hard to navigate for a screen reader.<\/li>\n\n\n\n
  6. Avoid underlining text.<\/strong> Underlining is normally reserved for links. Try using other means of highlighting information, such as bold, italics or caps.<\/li>\n<\/ol>\n\n\n\n

    Find and Fix<\/h2>\n\n\n\n

    Canvas has a very useful tool that can help you find some accessibility issues as you edit your page. At the bottom of the editor, the icon representing a human in a circle will show notification when something is amiss.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    When you click on that icon, the checker will open on the right-hand side, explaining each issue and allowing you to fix it right there.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    This tool can find:<\/p>\n\n\n\n