UDOIT Information

[tr_jbates]

What is UDOIT?

The Universal Design Online content Inspection Tool, or UDOIT (pronounced, “You Do It”) enables faculty to identify accessibility issues in their Canvas course content. It will scan a course, generate a report, and provide resources on how to address common accessibility issues.  It was originally created by the Center for Distributed Learning (CDL) at the University of Central Florida (CDL), and has received significant contributions from many organizations, especially Cidi Labs.

What does it do?

UDOIT will identify “errors” and provide “suggestions” in the following areas of your course:

• Announcements
• Assignments
• Discussions
• Files (i.e., .html files)
• Pages
• Syllabus
• Module URLs

It will check for many different accessibility issues, including:

• Use of headings in page structure
• Alternative text for images
• Table headers
• Color contrast
• Descriptive link text
• Video captions

Please note: some items cannot be examined by UDOIT. These include external documents and some videos/audio files for captioning/transcripts.

More Information

Instructors:

• If your institution is already using UDOIT with Canvas, it can be enabled via your Canvas course settings.
• For more information about UDOIT, visit our UDOIT information page.

Developers/LMS Admins/IT Staff:

If you are interested in downloading and installing UDOIT, visit the GitHub project.  If you would like to join the community of other users and developers, please join the UCF Open Source Slack organization.

[cpowell1]

Hi Jacob--do you have any screen reader users running UDOIT and UFIXIT? ~Carrie

[tr_jbates]

Not that I know of at this moment, but we've had screen reader users in the past.  The interface is usable with a screen reader, but we're always working to improve it.

[Stef_retired]

If you're interested in this, you might be interested in  @rseilham ​'s Canvas and Accessibility presentation on CanvasLIVE , which will be on Tuesday, October 11, 2016. Please RSVP if you're planning to attend. And if you're interested, but your schedule doesn't allow you to attend, please respond anyway to receive notifications of comments on the event.

[Stef_retired]

ATTENTION: Given the conditions and after-effects of Hurricane Matthew, our friends from UCF have notified us that the CanvasLIVE session Canvas and Accessibility has been rescheduled to Tuesday, August 25, 2016. Please be sure to RSVP to the event to be notified of updates.

[mtuten]

Hey tr_jbates​,

My institution is looking to add UDOIT to our Canvas instances (one is a test instance and the other is our production instance). In order to get UDOIT installed on one of our servers, our IT department has asked that we fill out a questionnaire. There are a couple questions from that questionnaire that I was hoping you could help me answer (I apologize if this isn't the appropriate place to be asking this).

• Will our system need to be accessed by anyone or any system outside of the Clemson network? If yes, what type of end-user connectivity will the system need from off-campus?
• Are there any specific ports we will need opened for a specific Admin Tool on our server?
• Does our system need to be configured for shibboleth authentication/authorization for htaccess files?
• Will the system need dependencies on other servers such as access to other servers for data exchange?

Thanks for any light you can shed on these questions.

[tr_jbates]

 @mtuten ​,

I think this is the perfect place to ask these questions, since others will be able to benefit from their answers.  My answers in bold:

• Will our system need to be accessed by anyone or any system outside of the Clemson network? If yes, what type of end-user connectivity will the system need from off-campus?  Since UDOIT is accessible through Canvas, you can access it from anywhere with an internet connection and a modern web browser. 
• Are there any specific ports we will need opened for a specific Admin Tool on our server?  The server will need ports 80 and 443 open for inbound and outbound connections.
• Does our system need to be configured for shibboleth authentication/authorization for htaccess files?  No.  Access to UDOIT is controlled automatically by Canvas.
• Will the system need dependencies on other servers such as access to other servers for data exchange?  UDOIT will need to communicate with Canvas through API calls.

Feel free to ask more questions.  You can also contact me directly via email if you like.

[mtuten]

Thanks Jacob!

Just as a followup to the ports question, what would be the source and destination for these ports?

I should have included the note in the answer section for that question. The note reads: "Ex: allow from <source> to <destination> on <port>.

[tr_jbates]

Hopefully this is what they are asking for:

Allow from world to UDOIT on 80 and 443

Allow from UDOIT to Canvas on 443

The first line is because this is a web server, and the second line is because UDOIT needs to talk to the Canvas APIs.

[mtuten]

Thanks!

[kschneider25]

Hi tr_jbates,

First, thank you for all of your hard work and information on this very needed product.

We are in the preliminary stages of planning this project and a question was asked that I cannot answer (side note: I cannot answer many questions but ..).  The question is after the installation about how many estimated hours in a month will we need to devote for maintenance and updating of our UDoIt instance?

Kori

[tr_jbates]

That's a great question  @kschneider25 ​!

UDOIT should require little to no maintenance.  For example, I haven't touched our installation of UDOIT since we performed the last update a few months ago.  In the future, we want to go to a monthly release schedule, but your institution can choose when they would like to perform updates (monthly, semesterly, yearly, etc.).

[crafte]

Hi tr_jbates​, we recently installed UDOIT and we are currently testing its functionality. We have an instructor who uploaded a couple of SoftChalk packages besides a large number of other files. There are many small files in several folders in each SoftChalk package. When running UDOIT to analyze the files in the course, it runs for a little while. The green bar states 'Scanning done' but the circle symbol next to it keeps running and a report is never created. Is there a limit on how many files the tool can analyze?

[tr_jbates]

Theoretically, there is a limit to the number of files UDOIT can scan in one go, but we haven't found it yet.  It's possible you hit the limit, but it's more likely that there's something in the SoftChalk packages that UDOIT doesn't like.  We encounter this from time to time.  I'm not sure if you're allowed to share the content with me, but I'd like to do some test scans on our installation to see if I can isolate the issue.

[Stef_retired]

If you're participating in this discussion, you'll definitely want to RSVP to the CanvasLIVE event UDOIT Installation which is coming up this Monday, December 5, 2016. RSVP “yes” if you will be there--and if you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" to receive all event updates. Your RSVP ensures that you will receive a notification should the event be cancelled or changed.

[mtuten]

Hey tr_jbates ,

Our institution has implemented UDOIT on our test instance, and some of our instructional designers have been playing around with it to see what false positives we may need to inform faculty to use discretion on. During the testing two seemingly oddball results came up.

There's one result I haven't been able to reproduce outside of this one case, but it said that I had a table that didn't have the appropriate table heading and scope code used when in fact it did. I've put the code at the very end of the post in case you can figure out why I was receiving that result.

The other result is that when emphasis needs to be created by something other than color, it wants the font to be bold via <span style="font-weight: bold">. I thought <strong> was the preferred method for creating bold, emphasized text. Can you help me understand why "font-weight: bold" is preferred?

Additionally, I've been getting requests that there be a kind of checkbox which allows false positives and manually-addressed results such as "videos need captions" to be marked as having been addressed when they're no longer an issue. Is it possible that something like that could be added? Even if the checkbox essentially moves the item to a section at the bottom of the page that's titled something like "Manually addressed issues," I think it would help.

Code:

<table style="width: 100%;" cellspacing="5%" cellpadding="5"><caption style="font-size: medium;"><strong>Canvas Apps</strong></caption>

<tbody>

<tr style="border-top: 1px solid #333333;">

<th scope="row">App Download</th>

<th scope="column"><a title="Download App from iTunes" href="https://itunes.apple.com/us/app/canvas-by-instructure/id480883488?mt=8"><img style="max-width: 1102px;" src="https://clemson.instructure.com/courses/19454/files/929317/preview" alt="" width="73" height="73" data-api-endpoint="https://clemson.instructure.com/api/v1/courses/19454/files/929317" data-api-returntype="File" /><br />iOS App</a></th>

<th scope="column"><a title="Download App from Google Play" href="https://play.google.com/store/apps/details?id=com.instructure.candroid&hl=en"><img style="max-width: 1102px;" src="https://clemson.instructure.com/courses/19454/files/929316/preview" alt="" width="77" height="77" data-api-endpoint="https://clemson.instructure.com/api/v1/courses/19454/files/929316" data-api-returntype="File" /><br />Android App</a></th>

</tr>

<tr>

<th scope="row">Video Guides</th>

<td style="vertical-align: top;">

<p><a class="external" href="https://vimeo.com/76565012" target="_blank"><i class="icon-video" aria-hidden="true"></i> Video: Canvas App for the iPhone</a></p>

<p><a class="external" href="https://vimeo.com/76630482" target="_blank"><i class="icon-video" aria-hidden="true"></i> Video: Canvas App for the iPad</a></p>

</td>

<td style="vertical-align: top;">

<p><a class="external" href="https://community.canvaslms.com/videos/1066" target="_blank"><i class="icon-video" aria-hidden="true"></i> Video: Canvas App for Android Phone</a></p>

<p><a class="external" title="" href="https://community.canvaslms.com/videos/1067" target="_blank"><i class="icon-video" aria-hidden="true"></i> Video: Canvas App for Android Tablet</a></p>

</td>

</tr>

<tr>

<th scope="row">Written Guides</th>

<td style="vertical-align: top;">

<p><a class="external" href="https://community.canvaslms.com/docs/DOC-4100" target="_blank"><i class="icon-apple" aria-hidden="true"></i> iOS Canvas App Guides</a></p>

</td>

<td style="vertical-align: top;">

<p><a class="external" href="https://community.canvaslms.com/docs/DOC-4104" target="_blank"><i class="icon-android" aria-hidden="true"></i> Android Canvas App Guides</a></p>

</td>

</tr>

</tbody>

</table>

[tr_jbates]

Michelle,

It looks like the table code is not using the proper value for column scope.  It should be

scope="col"

I was able to replicate the error and repair it by changing that value in two places.

For the "strong" question you had, we chose to use font-weight:bold because UFIXIT was already modifying the style attribute on the span.  The code is still valid, just not the same as what the RCE creates.  I can see the benefit of using the "strong" and "em" tags instead, so we'll look into that.

We have received the feature request for a "ignore this error/suggestion" checkbox, and it is on our list.  We still need to figure out the best way to implement that, such as how to identify a particular error across page edits or whether the error should be ignored forever.

We really appreciate the feedback!

[mtuten]

Hey tr_jbates,

Ah! No wonder. It's sort of sad that I didn't recognize that col should have been used instead of column....

With strong vs. font-weight, I thought that screen readers would verbalize the former but not the latter. Is that not the case? For the life of me, I can't seem to get my screen readers to verbally emphasize either one, but I've been told that's what it's supposed to do.

Yay! That's exciting.

Thanks for all your help.

[tr_jbates]

Good point.  I guess I always assumed that since screen readers detect visibility of elements via CSS, that they would detect the weight or emphasis as well.  I'll have to test this out.

[ajohnson]

Nope, screen readers do not indicate emphasis of any kind, such as italics or bold (or underline, which should never be used except in links anyway). It doesn't matter if they are in CSS or HTML. It's simply not mentioned. (Which I think is a good thing. Imagine having to hear a sentence read with "bold" "unbold" read around certain words. It would throw me off the content.)

[tr_jbates]

I know for sure that JAWS can detect bold or italic text, and can be configured to read that text in a different way.  However, it doesn't appear to be enabled by default.  Source:  JAWS Techniques for Examining Text Formatting

[mtuten]

Hearing "bold" "unbold" would be very distracting. As Jacob said and as I've been told, screen readers can indicate the emphasis by using a different pitch when reading. That's the thing that I haven't been able to get my screen readers to do yet. I'll certainly check out Jacob's resource tomorrow.

Thanks for the assistance guys!

[mtuten]

Found another reason why strong and em should be included. The "What does UDOIT search for" information cites these tags:

"This example shows how to use the em and strong elements to emphasize text. The em and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)."

If someone learning to be accessible sees this, follows this, and still gets errors because UDOIT uses font-weight, then that's going to leave the user confused and irritated.

[mtuten]

I noticed today that the Error vs. Suggestion classifications in the pop-up that appears when you click the What does UDOIT look for? appear to need updating.

The Headings Without Text and the Synchronized Captions suggestions actually appear as errors in the report. There may be more that also appear that way, but these were just the two I noticed.

[tr_jbates]

Thank you!  I'll put that in as an issue, and we'll get to it soon.

[mtuten]

I'm writing a UDOIT user guide for our institution (I may be able to put it on Canvas Commons once it's finished), and I'm struggling to trigger some of the results listed in What does UDOIT look for?

These are:

• Multimedia objects should have text equivalents (e.g., transcripts).
• The text equivalents (e.g., transcripts and/or captions) for embedded content should update when content changes.
• Avoid the use of animated GIF’s

What do I need to do to earn these results?

With the last one, I tried embedding an animated gif that I found on Google and I tried embedding a copy of the gif that had been uploaded to Canvas, but neither instance earned the "Avoid the use of animated GIFs" message.

For the others I tried recording audio-only and webcam footage via Canvas's media tools and I tried embedding a soundcloud file, and a voicethread. The only items UDOIT flagged were the YouTube and Vimeo videos located elsewhere in the course, but they got the "Synchronized captions should be provided for prerecorded web-based video" result.

[tr_jbates]

These three errors/suggestions typically only show up in older courses at our institution, but GIFs are still popular, so that one should be easier to replicate.  Here's some more info about each:

• Multimedia objects should have text equivalents (e.g., transcripts).
  • Looks for links to 'wmv', 'mpg', 'mov', 'ram', and 'aif' files
  • Source code:  UDOIT/accessibility_tests.php line 232 at v2.1.0 · ucfopen/UDOIT · GitHub
• The text equivalents (e.g., transcripts and/or captions) for embedded content should update when content changes.
  • Looks for an 'object' tag (like you would use when embedding a Flash object)
  • This one can only be replicated in an HTML file, because Object tags are stripped out by the Rich Content Editor.
  • There are a few suggestions that appear when an object tag is detected, and they all point out different things to look for.
  • Source code:  UDOIT/accessibility_tests.php line 4829 at v2.1.0 · ucfopen/UDOIT · GitHub
• Avoid the use of animated GIF's
  
  • Looks for any image with a '.gif' extension, and then checks the differences between each frame to see if there is enough flicker to warrant warning the user about it.

• Source code:  UDOIT/accessibility_tests.php line 3315 at v2.1.0 · ucfopen/UDOIT · GitHub

[mtuten]

The UDOIT User Guide is finished!

Canvas Commons UDOIT User Guide

Jacob et al. if you see changes I need to make to this guide, please let me know.

[tr_jbates]

 @mtuten ‌ This is amazing!  I've only looked over the first half, and it's very detailed.  Thank you so much for doing this!  Mind if I make a post about it to help spread the word even more?

[mtuten]

I don't mind at all.

[kevinw]

Has anyone else had an issue where they successfully install it through heroku, set it up, make sure that yourname.heroku. is working, then when they run it it says "UDOIT failed to scan this course"? 

What are some possible errors going on here? 

[tr_jbates]

Sorry I didn't get to this sooner.  Let's keep this conversation going on the other thread: "UDOIT FAILED TO SCAN THIS COURSE"

[mtuten]

My institution has almost finally finished installing UDOIT! Yay!

I'm assuming that the folks doing the installation at my university have installed the latest version, and I wanted to run a couple of thoughts by you.

1. Is there something wrong with how my institution has installed UDOIT or is there really so much more bold font than the previous version? If it is necessary to have so much bold font, could the bold be removed from the preview of issues? I find the Avoid using color alone for emphasis error particularly confusing when the preview shows the font in a bold format.
   
2. With the No row or column scopes declarations found in headers of the table error, could there be a third preview added called Context which would display the whole table row that contains the offending cell? I had a course where I remembered to designate the header cells, but forgot the scope, and without being able to look at the table to determine if the scope needed to be column, row, or both, I couldn't use the U Fix It button.
   

[mtuten]

One more thing I noticed is that the Consider adding headings to your document to create more structure error has a collapsible area where the view source and U Fix IT button would normally be that instead only contains a list item number. Is it possible to forego the collapsible area if it contains no content?

[tr_jbates]

I'm not sure when the bold text was added to the preview, but I believe it was done within the last 6 months.  I can see how this would be misleading, so I have created Issue #258 on the GitHub project.

Previewing the whole table would be very useful.  I've created Issue #259 on the GitHub project.

[tr_jbates]

I actually just noticed this issue myself.  The numbered list should not be there at all, since there is only ever one of these per page.  I've added Issue #260 on the GitHub project.

[mtuten]

If previewing the whole table takes up too much space, just previewing the row should be sufficient, I would think. Also, would adding the preview change what source code is shown? I wonder if it wouldn't be useful to display the whole table/row in the preview pane, but have only the cell's code in the source pane.

[kkorstad1]

At MiraCosta College we are testing UDOIT on our production Canvas.  I can not get it to work with Firefox on the MAC or the PC.  On the MAC I have Firefox 59.0.2 (64 bit) and on the PC I also have Firefox 59.0.2 (64 bit). (The latest Firefox).  Is this a known issue or do I need to do something on my server? You click UDOIT within a Canvas course and it does nothing.  Works great in Safari and Chrome on the MAC, and Chrome on the PC.  Edge on the PC works but throws and error asking to open a new window.

Let me know

Karen Turpin

kturpin@miracosta.edu

[tr_jbates]

I'm not able to reproduce the issue on Firefox 59.0.2 on MAC.  How are you hosting UDOIT (Heroku vs self-hosting)?  Is your server set up to use SSL (HTTPS)?

[kkorstad1]

Hi Jason

We were able to figure it out. It was on our end here here at MCC.

Server Tech said... "No, that was my fault. I did not update the allow from miracosta.test.instructure to miracosta.instructure on the website.

It is to prevent https://www.owasp.org/index.php/Clickjacking

Should be good now."

Thank you for looking into this. We are all good to go now.

Karen Turpin

[tadm9280]

Hi Jason, 

Our institute is planning to move the local installation of udoit app to set it hosted in cloud.  I just tried to setup a test udoit using AWS, but when I link it to Canvas (as external tool), there's error missing oauth_consumer_key, custom_canvas_api_domain ("Please ensure that your instance of UDOIT is installed to Canvas correctly. Missing: custom_canvas_api_domain" ) couldn't find it's defined under either localConfig.php or settings.php.  are these values autogenerated from some other file?  If not,Where should I set these parameters?   Thanks!  

Ruiling Z.

[tr_jbates]

It seems like adding the app to Canvas didn't go through correctly.  The error you're seeing is because UDOIT is not receiving those two fields from Canvas, so make sure you are using the correct XML when you add your app.  Refer to Installing the LTI in Canvas in the UDOIT README for the full instructions.

[tadm9280]

Thanks Jacob for your quick reply.  Yes, I checked the udoit.xml.php referred, looks like the parameters did match setting on my installation.

could it be possible that my udoit apps is set as aws ec2 instance, and I used a self-signed certificate for testing (to support https). but canvas failed to pass through via self-signed SSL?  

...

<blti:icon>

https://{myec2DNS}/assets/img/udoit_icon.png

</blti:icon>

<blti:launch_url>

https://{myec2DNS}

</blti:launch_url>

<blti:extensions platform="vt.test.instructure.com">

<lticm:property name="tool_id">udoit-awstest</lticm:property>

<lticm:property name="privacy_level">public</lticm:property>

<lticm:property name="domain">{myec2DNS}</lticm:property>

<lticm:options name="custom_fields">

<lticm:property name="canvas_api_domain">$Canvas.api.domain</lticm:property>

</lticm:options>

<lticm:options name="course_navigation">

<lticm:property name="url">

https://{myec2DNS}

</lticm:property>

<lticm:property name="default">enabled</lticm:property>

<lticm:property name="visibility">public</lticm:property>

<lticm:property name="text">UDOIT</lticm:property>

<lticm:property name="enabled">true</lticm:property>

</lticm:options>

</blti:extensions>

...

[tr_jbates]

It's entirely possible that your self-signed cert is preventing Canvas from sending those extra parameters.  Other than that, I'm not really sure what's going on.

[rlzhang]

Thanks Jacob.  Make  progress! By twisting my local config with curl_ssl_verify and also modified xml domain with https, now the app displayed correctly and linked to canvas.  But when I scanned the course(very simple test course), it showed 'UDOIT failed to scan this course'. Looked into the log under /var/log/httpd.  there's indicated:

Uncaught exception 'UnexpectedValueException' with message 'The stream or file "/var/www/phpudoit/config/log.log" could not be opened: failed to open stream: Permission denied' in /var/www/phpudoit/vendor/monolog/monolog/src/Monolog/Handler/StreamHandler.php:....

the source structure I put Document root to my 'public' folder, so config/ is set under /var/www.  the folder var/www I already gave all rw permission to ec2-user.  so why write permission failed? is other place I need set permission?  Where is the good place to see the detail log?  thanks!

Ruiling

[tr_jbates]

I'm not sure why the config/log.log file can't be opened.  Does it exist on disk?  If not, try creating it and running the scan again.

[jrkinsella]

Using the Heroku installer and directions, I've gotten UDOIT setup and running, but I think I may have some additional config that needs to happen.

• Everything seems to work in Chrome so far (yay!)
• In the most recent version of Firefox on MacOS X things work (yay!), but the enterprise version of Firefox for Windows (Firefox ESR) cases the following error:
  • while(1);{"error":"invalid_client","error_description":"unknown client"}
    
    • This does not happen with Firefox ESR on MacOS X
• Safari on Mac OS X is throwing an error for me (10.13.6, Safari 12) of " Missing Session information. Please refresh the page. Missing: base_url"

Any suggestions on addressing the bottom two errors?  

[jrkinsella]

I figured out the while(1);{"error":"invalid_client","error_description":"unknown client"} error - I had an OAUTH key error.  But the Safari issue persists.

[tr_jbates]

I think the Safari issue is related to the default setting of disallowing cross-site tracking.  Unfortunately, what prevents advertisers from tracking us also prevents our apps from working properly sometimes.  Basically, if the page tries to load up another domain in an iframe, and the user has never navigated directly to that other domain before, the cookie will be blocked.  One workaround for this is to have the user visit a page on the same domain as the LTI first, which tells Safari that this is a known site and it's ok to receive cookies from it.  We've never run into this issue at UCF, since both our Canvas instance and our UDOIT instance are on subdomains of ucf.edu.  Try that out and let me know how it goes.   @shea_silverman ‌ has had to deal with this before, so maybe he can provide more insight.

[tadm9280]

Hi Jacob, first thanks your time and email exchanges on all your suggestion!  The problem of showing 'Failed to Scan the course" was worked out correctly now on deploying on AWS. Scan reports are also exported successfully.  Main things we tried to work it out: applied loadbalancer security endpoint with HTTPs on udoit ec2, changed on PHP 7.0, twisted max execution time, granted write permission vendor/mpdf,monolog to web server except for public folder.  In case some one ran into the similar problem. 

[dhelms802]

When running UDOIT, pages with tables are constantly being flagged for not having table headers.  When applying the U Fix It remedy, checking the HTML for the <th> tag, and re-running the report, it still identifies an error in the table header with the following notification, "No table headers found".

This has been an ongoing issue and I was wondering if it is a "bug" or known issue, or is there a workaround to avoid being flagged for an error that does not exist.  Here is the HTML code that is being flagged:

Line 67: <table style="height: 145px; width: 75%; border-collapse: collapse; margin-left: auto; margin-right: auto;" border="1" cellspacing="10" cellpadding="2"> <caption>Grading Criteria</caption> <tbody> <tr style="height: 29px;"> <th style="width: 50%; height: 29px; text-align: center;" scope="col"><strong>Assignment</strong></th> <th style="width: 50%; height: 29px; text-align: center;" scope="row"><strong>Percentage of Grade</strong></th> </tr> <tr style="height: 29px;"> <td style="width: 50%; height: 29px;">Copyright Quiz &amp; Meet and Greet</td> <td style="width: 50%; height: 29px; text-align: right;">5%</td> </tr> <tr style="height: 29px;"> <td style="width: 50%; height: 29px;">Discussions</td> <td style="width: 50%; height: 29px; text-align: right;">30%</td> </tr> <tr style="height: 29px;"> <td style="width: 50%; height: 29px;">Reflections</td> <td style="width: 50%; height: 29px; text-align: right;">25%</td> </tr> <tr style="height: 29px;"> <td style="width: 50%; height: 29px;">Tech Tasks</td> <td style="width: 50%; height: 29px; text-align: right;">40%</td> </tr> </tbody> </table>

I hope someone can assist me with this issue.

Thanks in advance.

Del