Skip navigation
All Places > Accessibility > Blog
1 2 Previous Next

Accessibility

26 posts

I've written some accessibility tools for Canvas using JS, they're plug and play so you shouldn't need any programming knowledge to incorporate them into your own instance.

 

See my original post in Canvas Admins: Using JS to Add Accessibility Features to Canvas.

 

Please leave any comments/feedback here for me to see  Otherwise I can't fix or add anything to it!

tr_jbates

UDOIT 2.4.2

Posted by tr_jbates Jan 28, 2019

Fixes the following bugs:

  • There was a typo in the migrations script (thanks Tanner W Stokes!) that would prevent reports from very old versions of UDOIT from transferring to the database.
  • Special characters in page titles would break the "view source of this issue" button (thanks Justin Lopez from FIU!).

 

View the release notes to download this release.

tr_jbates

UDOIT Version 2.4.1

Posted by tr_jbates Jan 2, 2019

In my haste to release 2.4.0 before the holiday break, I forgot to include the changes I made to the "No closed captions found on media comment" error.  You can view the 2.4.1 release notes to download this version of UDOIT.

 

Happy new year!

 

We are working on some larger features for the 2.5.0 release, but we wanted to get these out to you before the start of the new year.  Many of these features and bug fixes are a direct result of the conversations we've been having with people on the Canvas Community and the UCF Open Source Slack.

 

(Yes, Christmas is a real town in Central Florida.)

 

Important Note:  If you are upgrading from an existing installation, there are some specific instructions you need to follow.  Refer to the full release notes.

 

Bugs Fixed

  • Bold text with color emphasis is no longer flagged as an error.

  • UFIXIT for links now lets you include a portion of the URL as your link text (e.g.: "Wikipedia" is perfectly good link text for "https://wikipedia.org").

  • Videos playing within "View the source of this issue" now stop playing when you click "Close issue source".

  • Improved detection of YouTube and Vimeo videos to avoid erroneous results.

  • Docker files no longer mount as directories.

     

Features added

  • Updated the description for missing captions on Media Comments to make it more helpful.
  • Added Endpoint that returns the health status of the application in JSON for use in status dashboards.
  • Added UI for marking videos that are unlisted, private, or deleted as requiring manual verification for captions.
  • Added check for valid YouTube and Vimeo API keys, marking all videos for manual verification if a valid API key is not found for that service. A log entry is also made whenever an invalid key is found.

 

Read the full release notes for more information and installation/upgrade instructions.

 

The UDOIT team wishes everyone a safe and happy holiday!

This is a 1-page accessibility checklist that I designed for staff. I know it misses some things, but I have aimed to condense all the key points for staff to have a basic understanding of what their course needs to look it. If I had given some staff pages and pages, I don't think they would ever have looked at it, so this is a 'quick' accessibility checklist with the most obvious things! We have to start somewhere. Hope it's useful. 

tr_jbates

UDOIT Version 2.3.5

Posted by tr_jbates Aug 17, 2018

This is a very tiny update that fixes an issue with false positives and Vimeo videos.  Previously, UDOIT was only detecting Vimeo videos embedded in an iframe because the URL was of the form "https://vimeo.com/player/########".  However, when you simply link to a Vimeo video, it's in the form "https://vimeo.com/########".  UDOIT was detecting those Vimeo video links, but not properly checking them for captions, resulting in a false positive.

 

This release does not require any changes to your localConfig file, migrations for your database, or updates to packages.  However, you should still test it on a test installation of UDOIT before moving it to production.

 

To download, visit Release v2.3.5 · ucfopen/UDOIT · GitHub 

mtuten@clemson.edu

UDOIT User Guide

Posted by mtuten@clemson.edu Jul 25, 2018

Hi all. So, if you are/have attended InstructureCon 2018 and were able to attend the "Y'all Do It: Crowdsourcing
Development of UDOIT" presentation, you already know about the UDOIT User Guide and about how you can contribute to it. For the rest of y'all, here is what you missed.

What is UDOIT?

For those who don't yet know, UDOIT is an automated accessibility auditing tool for Canvas courses that was developed by University of Central Florida as part of a Canvas Grant. To learn more about UDOIT, explore the following links:

Below is UCF's video overview of UDOIT:

Note: Whenever you're installing an initial or new version of UDOIT into Canvas, PLEASE install it to a test instance and make sure it works before installing it to your production instance.
During the intial writing of this post, Clemson had the latest version installed on our test instance, but, because we had not been able to get it to work, it had not touched our production instance and the faculty were none the wiser.

Why Do You Or Why Does UDOIT Need a Guide?

If you or your faculty aren't really familiar with the rules or expectations of digital accessibility, you need a guide. Automated accessibility auditing tools are thought to only catch about 25% of accessibility issues, and UDOIT is no different. There are some things that UDOIT will flag that aren't accessibility issues and then there are some accessibility issues that won't be flagged.

For example, in early versions of UDOIT, all color contrast error reports were based on the assumption that the text was on a white background. If the text was not on a white background, some text colors that would be accessible on white but not accessible on the actual background color would not be flagged, and text colors that were not accessible on white backgrounds but were accessible on the actual background color would be flagged. 

Knowing when you should address or ignore a UDOIT report is important.

How Can You Get A Copy Of The Guide?

This guide is available in Canvas Commons with a Creative Commons Attribution, Non-Commercial, Share-Alike license. Because Canvas Commons doesn't give me a way to track who and how many of your are downloading the guide, please let me know you've downloaded it through a comment in Canvas Commons or here

Jacob and Karen have also expressed that they'd love to know when you've downloaded UDOIT too. So, when you do that, please leave a comment on Github or in Canvas Community (the UDOIT Information page would be a great).

Also, after you've tried the UDOIT User Guide, feel free to leave feedback here or in Canvas Commons as well!
If your feedback includes questions, please post them here instead of Commons as Commons won't allow me to reply to comments.

To access the User Guide, you must first be logged into Canvas. After you've logged in, follow this link:

UDOIT User Guide in Canvas Commons

For those who cannot access Canvas Commons, I have attached a .imscc zip file. You'll need to follow How do I import a Canvas course export package? directions to upload it to your Canvas instance.

To see an Overview of this guide, watch this UDOIT User Guide (v1, 2017) video overview.

What Can You Expect In The Next Version?

We're hoping to update the UDOIT User Guide after 2.4.1 or 2.5.1 is released (which is slated to happen this year). If we're able to do so (see earlier note), you can look forward to the following:

  • Updated information (duh)
  • Updated, cleaner look with (hopefully) simpler code.
  • Tips for using UDOIT alongside Canvas's built-in auditing tool.
  • Possibly other features suggested by YOU!

Wait?  What happened to 2.3.3?  Well, I released 2.3.3 and 2.3.4 on the same day, so I figured I'd cut down on the clutter and do one post.  This one contains a fix for a pretty major bug in 2.3.2, so it's definitely worth upgrading.  As with every release, please test this out on your own test server before deploying it to your production server.

 

I also wanted to mention that I'll be at InstructureCon/Carn next week!  I'll be presenting with Michelle Tuten and Karen Tinsley-Kim.  Check out Michelle's blog post for more information.  If you want to catch up with me and/or get a sticker, just look for the guy with a sign on his backpack that says "Ask me about UDOIT".  I'll also be attending Hack Night again this year, so feel free to come by and talk shop.

 

Anyway, on to the UDOIT update:

 

Highlighted Changes

  • Fixed major performance bug that caused even small courses to time out.
  • Added documentation for Vimeo API keys and Google Analytics tracking codes to  README.md and  HEROKU.md
  • Added support for PHP 7.2 and cleaned up documentation to remove references to 5.3 and 5.4

 

See the release notes for UDOIT Version 2.3.4 for download links.

Word, PowerPoint, & Acrobat logos.

Enrollment for WebAIM's new course––Accessible Documents: Word, PowerPoint, & PDF––is now open. This online, video-based, independent-study course will be offered in Canvas Catalog and requires between two and four hours of course activity each week, for four consecutive weeks.

Participants who demonstrate their mastery of the course materials through weekly quizzes and exams will receive a Certificate of Completion. These certificates will allow individuals and/or organizations to document training and proficiency in creating accessible web documents in common formats.

The first cohort of the course starts on Monday, July 9th. New cohorts will start on the first Monday of each month. To enroll go to Accessible Documents: Word, PowerPoint, & PDF | July 2 - October 3.

A promotional code* for 20% off the $125 course fee is available for the first cohort of the course. Use the code "LAUNCH". For more information, visit the Document Accessibility Course page on the WebAIM website.

WebAIM: web accessibility in mind

*Valid July 2 - 10, 2018.

Hey Everyone!

 

One of Instructure’s core values is openness. We believe that great ideas can come from anywhere and that one of our greatest assets is you—the amazing Canvas community. It is from this belief that the founders of Instructure decided to make Canvas an open source LMS. As we continue to add new capabilities to Canvas, we’re committed to making them available to the open source community. Not only do we work hard to publish the code for Canvas, we also allow anyone to jump into github and make contributions. We review every single pull request that comes in, and numerous community projects have been added into the core product. To everyone who has helped make Canvas what it is today, THANK YOU! To anyone who hasn’t yet contributed, we invite you to dive in and give it a go!

 

In fact, that’s the core message of this post: we’d like to encourage even more people to make contributions to Canvas, and we’re actively working on ways to make it easier for you to do so. We’re extremely grateful for all the pull requests we receive, and we’d love to have even more. And, as it turns out, we think we might have a good project for new and seasoned contributors alike.

 

We recently released a new tool to help identify accessibility issues when creating content in Canvas, called the accessibility checker. It runs in the Rich Content Editor (RCE) and detects several of the most common accessibility mistakes that users make when creating content. In addition to alerting the user about any issues, the checker also makes it easy for the user to resolve the concern.

 

 

Currently, the tool checks for 11 different accessibility errors. We’re passionate about accessibility, as we know many of you are, and we’re optimistic about the potential that this tool has to raise awareness and education on the importance of accessibility. The accessibility checker has been fully open sourced, and everyone is invited to check it out on github! We’ve added several items to the project, some of which have been identified as good projects for beginners to tackle:

 

Project Ideas:

  • Don’t combine words when merging sequential links
  • Add “Auto Fix” button for resolving color contrast issues
  • Link Validation
  • Check for ordered and unordered list structure
  • Check that headings have appropriate tags
  • Check links for descriptive words
  • Check videos for captions

 

Besides the items that we’ve added, we’re sure many other great ideas will come from the community. Please feel free to share this project with developers or anyone you know who might be interested in seeing this project move forward. Is your computer science class looking for a worthy project? Maybe this is it.

 

As we work together, we’re confident that this tool will be a positive driver in making learning content more accessible for everyone.

tr_jbates

UDOIT Version 2.3.2

Posted by tr_jbates May 11, 2018

This release removes support for PHP 5.4 and 5.5, fixes some bugs, and adds some convenience features.

 

Highlighted Changes

  • Supported PHP versions:  5.6, 7.0, 7.1
  • Added a configurable maximum size for files before they are marked as "unscannable".  This is mainly to prevent server and database issues, but also promotes best practices for students on mobile devices or slow internet connections.  Default value is ~50MB
  • Added a configurable value for the maximum allowed length of ALT text.  Default value is 125 characters. (Thanks Sonya Madsen Woods for suggesting it!)
  • Added detection of captions in Vimeo videos.
  • Added detection of Dailymotion videos.  It will create a suggestion for every video found regardless of the presence of captions.
  • Added a Report Summary that contains totals for each type of error and suggestion.
  • Added "download" and "view in folder" buttons for each unscannable file.
  • Updated outdated links to accessibility resources.
  • Clarified phrasing for closed caption errors.

 

For more information, and to download the latest release, visit the v2.3.2 Release Notes.

 

If you previously installed v2.3.0, please follow the "Existing Installations" instructions in the v2.3.1 Blog Post.

Here is a handout with tips for addressing accessibility issues in a Canvas course after the fact or before the fact.  Feel free to adapt it to your school, and please comment if you have suggestions/edits for improving this document.  There is a Google doc version tailored for our school at bit.ly/canvasaccessibility.

How to Fix Accessibility Issues in Your Canvas Course

Learn more about accessibility & universal design at webaim.org & cast.org

 

  1. Student Support - The course should include information about the office for student disability services and how students with disabilities may receive accommodations
  2. Software - Check the accessibility of all tools and software used in the course
  3. Web Pages - Check Canvas content with the Canvas accessibility checker (and/or UDOIT or Ally if available)
  4. Web Links and Text - Check that all your links are up to date and have descriptive text
  5. Images - In addition to checking that all images have alt text and proper color contrast:
  6. Videos - all videos and audio should have correct captions or transcripts
  7. Files - All files and documents should be checked for accessibility
  8. Math - All math equations and formulas should have alt text or MathML representations
  9. Alternative Formats - A separate accessible version of content should be made available when there is no other way to make it accessible
  10. Assignments & Quizzes - All assignments and online activities should have clear expectations to help students understand how to do them and why they are doing them
  11. Student View - Check the course in student view for broken or inaccessible functionality
  12. Mobile Compatibility - Check the course for usability in the Canvas Student app

 

How to Prevent Accessibility Issues in Your Canvas Course

 

  1. Modules - Use the modules page as the primary place where you build and organize your course.  Think of it as the table of contents or outline or to-do list for your course. If you have a reading or assignment or discussion for a particular week or unit, add it to the module for that week or unit.  This way, everything associated with that week or unit will be more visible to you and your students. You can see in a glance if something is not available or unpublished that shouldn’t be, or if a requirement was not set, and so forth.  See How do I add a module?  and How do I add assignment types, pages, and files as module items?
  2. Don’t Copy & Paste – Don’t copy from other courses or websites or documents into Canvas.  If you do, the text will copy over just fine (although it may mess up the text styles and fonts), but images will not copy over like they would when copying and pasting into a Word document.  Images have to be downloaded from the other site (right click on the image and choose ‘save image as’), and then you can upload and insert the image into Canvas, entering alt text when doing so.  When copying content from another Canvas course, use the course import tool to ensure all images and links are fixed.  Use the link validator to check for any broken images or links.
  3. Images – When inserting an image, always remember to set the alt text with a description of what is in the image for screen readers.  If you want to embed a very large image, reduce its file size with a photo editor first. See: How do I embed images from Canvas into the Rich Content Editor?
  4. Tables – Minimize your use of tables, but when you do use them, set a caption and header row or column in the table properties. Do not set the width of a table or table cell to a fixed value, use percentages instead.  Reduce the number of columns for readability on mobile devices. See How do I insert a table using the Rich Content Editor?
  5. Text Color - You should not use color or font size alone to distinguish text or convey importance. See How do I add and modify text in the Rich Content Editor?   Check that color contrast is sufficient using this Color Contrast Checker from WebAIM.
  6. VideosSpeak clearly when recording videos and audio so that automatic captions will be more accurate and save you time with making any corrections.  Also check that in the Canvas Student app the video can play full-screen.  On Youtube, click the share button to copy the embed code for a video and then insert the embed code in your page.
  7. Documents - Use the built-in Accessibility Checker when creating Word documents.
  8. Math - Use the Canvas Math Editor or WIRIS app to generate equations and formulas.
  9. Assignments - Use rubrics and transparent assignment templates and techniques.
tr_jbates

UDOIT Version 2.3.1

Posted by tr_jbates Feb 15, 2018

This release is mainly bug fixes for the migration scripts from 2.3.0.  Big thanks go to Santa Rosa Junior College for discovering and fixing most of these.

 

Existing Installations

If you previously installed version 2.3.0, you will need to perform the following actions manually:

  • In the reports table, add a report_json field of type MEDIUMTEXT if it does not already exist. If it already exists, change the type to MEDIUMTEXT
  • In the job_queue table, make sure the results field is of type MEDIUMTEXT

If you are upgrading from an existing installation (including 2.3.0), follow these instructions:

  • Test in a development or QA environment, not on production.
  • Update your localConfig.php file to include new fields from localConfig.template.php
  • Back up your database and run
    php composer.phar migrate

 

Changelog

  • Fixed bug where $oauth2_id was sent in place of $oauth2_uri during the setupOauth call.
  • Fixed bug where null or empty scan_results were not handled properly.
  • Fixed bug where empty canvas_url fields in the user table were never updated with the proper value.
  • Fixed bug where null values in table row child nodes were not handled properly.
  • Fixed bug with migration scripts where the report_json column was never added to self-hosted instances.
  • Added status messages to migration scripts to help with debugging in the future.
  • Added mobile verbiage to the unscannable suggestion in localConfig.

 

For more information, and to download the latest release, visit the v2.3.1 Release Notes.

tr_jbates

UDOIT Version 2.3.0 "Bithlo"

Posted by tr_jbates Dec 19, 2017

Note: There is a known issue with the self-hosted version of this release.  If you are using Heroku, you can safely ignore this message.  View the UDOIT FAILED TO SCAN THIS COURSE thread for more information.  This issue will be fixed in 2.3.1.  For now, we recommend waiting until the next release to upgrade.

 

This release was mostly an overhaul of the backend with a few visual tweaks here and there.  You might not notice the changes, but they were sorely needed.  As always, if you have any issues, please comment on this blog post so that we can keep everything in one place.

 

Important Note:  If you are upgrading from an existing installation, there are some specific instructions you need to follow.  Refer to the  full release notes.

 

Highlights

  • Added support for PHP7 while maintaining backwards compatibility.
  • Enabled usage of a background worker with Heroku, fixing timeout issues and allowing for scalibility on that platform. #292
  • Added version number to the top-right of the banner.
  • Fixed "double scrollbar" issue by making the iFrame height dynamic.
  • Fixed a bug where UFIXIT would stop working an hour after your scan was started.
  • Replaced the UDOIT graphic with an SVG for higher quality and scalability.

 

Read the full release notes for more information and installation/upgrade instructions.

 

The UDOIT team wishes everyone a safe and happy holiday!

When you create content for your course it is important to make sure you are structuring content in accessible way. The list feature in the rich content editor in Canvas has options for creating unordered and ordered lists. The unordered list is for organizing lists of similar content where as the ordered list option is for organizing tasks that should be completed in specific order. 

Example an Unordered (Bullet) List

In this example I created a list of dog breeds. In the rich content editor select the items you wish to create a list and then in the toolbar select unordered list item option. 

  • Akita
  • Doberman Pinscher
  • Boxer
  • Great Dane

 

Example of an Unordered List with Indenting List Items

Lists can also be nested using the indent option in the rich content editor toolbar. Select the list items you wish to indent and select the indent option in the toolbar. The bullet style will be different for the indented items. 

  • Working Dogs
    • Akita
    • Doberman Pinscher
    • Boxer
    • Great Dane
  • Toy Dogs
    • Miniature Poodle
    • Yorkshire Terrier
    • Miniature Schnauzer 

Example an Ordered (Numbered) List

In this example I created a list of instructions for assignment. In the rich content editor select the items you wish to create a list and then in the toolbar select the ordered list item option. 

  1. Read the following article from the Illinois Online Network website: What Makes a Successful Online Student.
  2. Create a message and answer the following questions: What are your role priorities (student, parent, child, worker, friend, etc)? and How will being an online student fit with your other responsibilities?
  3. Now that you have completed this course what advice would you give to students who are new to taking courses online? 

Example of an Ordered List with Indenting List Items

In this example we are going to create a ordered list with nested items. In this list we are going to display the questions on separate lines and nest them under number 2. Place the cursor before the first question and hit the enter key to create a new line in the list. Repeat this process for the second question. Select the list items you wish to indent and select the indent option in the toolbar. The nested items will also have numbering; however, you can change by switching to the HTML View and changing the code just a bit. 

  1. Read the following article from the Illinois Online Network website: What Makes a Successful Online Student.
  2. Create a message and answer the following questions: 
    1. What are your role priorities (student, parent, child, worker, friend, etc)? 
    2. How will being an online student fit with your other responsibilities?
  3. Now that you have completed this course what advice would you give to students who are new to taking courses online? 

How to Change the Nested List Numbering

In the rich content editor switch to HTML View. In the code find the nested list. In the example below it is line 4. Place the cursor inside the LI element tag and hit the space bar. Then type the following text to create the attribute for ordered list item (type="a").  There are other attributes you can apply. See this reference guide from HTML Dog. 

<ol>
<li>Read the following article from the Illinois Online Network website: <strong><a href="http://www.ion.uillinois.edu/resources/tutorials/pedagogy/StudentProfile.asp">What Makes a Successful Online Student</a>.</strong></li>
<li>Create a message and answer the following questions:
<ol type="a">
<li>What are your role priorities (student, parent, child, worker, friend, etc)?</li>
<li>How will being an online student fit with your other responsibilities?</li>
</ol>
</li>
<li>Now that you have completed this course what advice would you give to students who are new to taking courses online? </li>
</ol>

(Bonus) Other List Options

There is another list option called the definition list option. This list option is useful for glossary terms. It is important to note this list option is not available as an option from rich content editor toolbar and you will need to edit the HTML code on the page. Below is example of how to write the code. Refer to the resource list below for more details on how to write a definition list. 

<dl>
<dt>3D</dt>
<dd>three-dimensional; used commonly in computer animation, virtual reality, etc.</dd>
<dt>404</dt>
<dd>Not Found error message; a HTTP standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested</dd>
</dl>

Additional Resources