Using JS to Add Accessibility Features to Canvas

[tbeaton88]

When I first started using Canvas I surprised about the lack of accessibility features available to users, so i decided to create my own and to share them with the wonderful community.

Below I have attached some JS and some CSS too which I highly recommend that you implement into your version of the LMS. (I will happily write up a guide on how to implement it as well as how it works if anyone would like).

The accessibility tools below allow learners to change the text size of each custom page that you create. (Nothing native to Canvas, simply any pages, quizzes, assignments, etc that you have created).

It also allows the user to change the background colour of pages too (I may be implementing a text colour option soon too).

Clicking 'Accessibility' on the global navigation toggles the menu that you can see in the bottom left:

I hope this helps your instance of Canvas become more accessible and that you all find it useful  

accessibility.js.zip

[erin_cox]

This is really cool! If a user changes the text size or background color, will that "stick" and continue to apply to other pages they look at, or do they have to reset the accessibility settings every time they navigate to a new page?

[tbeaton88]

Yeh, it uses cookies to keep the users settings

[rosemary_saul]

This looks good. Is there a demo setup somewhere in Canvas?

[tbeaton88]

Unfortunatley not, you can however go to <yourInstance>.test.instructure.com if you want to give it a demo without affecting your live account.

You should just need to add the code to your themes and away you go  Feel free to ask for help

[dave_perry]

We have noticed that when you hover over the Accessibility icon on the main tray icon, the icon does not retain transparency. Suggestions for how to fix that?

[dave_perry]

Also we're struggling to make it work on the white space between the Previous and Next buttons, the background for items within the Modules view, and the Breadcrumbs.

Any suggestions?

[tbeaton88]

Oh! How funky! I'll edit it when I'm in work tomorrow  I'll upload the edits to the main post so that everyone gets the new version.

Could you send me/post the screenshots of the other issues please? I've checked them and the next and back buttons and breadcrumbs seem to work fine for me. I never implemented the space on the modules button so I'll be sure to add that too :smileylaugh: 

I hope this helps.

Tommy 

[dave_perry]

Module bit (each module_context has an ID, and us trying to rewrite the generic class failed) attached - we managed to take over the grey area (#context_modules_sortable_container). The breadcrumbs did work my bad, it just didn't affect the breadcrumb preview in Theme editor for some reason:

Gap between previous/next buttons:

I also noticed the Chat window isn't affected by the colour change either. The same goes for the Settings page, which would be nice but equally this is more a tool to fix things for students than staff (ergo students won't be touching the settings page):

Thanks

[tbeaton88]

Hi there, sorry for not getting back to you sooner, I had a uni deadline to meet so couldn't work on this when anticipated. I've updated the JS file on the blog however I've never seen that chat window before! What is it? Is it something we need to enable? I'm very intrigued!

Thanks

[dave_perry]

It's one of the canvas activities. I just happened to try it on that when skimming through the other week.

I have just tried this new version out, and it doesn't put an Accessibility button in the tray! I'm seeing no javascript errors though.

[tbeaton88]

How curious, I've uploaded the new code my end and am seeing no problems with it 😕 I don't want to sound rude here but did you overwrite the old code or is it still in there?

Perhaps try and use developer tools to see if the element is being created?

[tbeaton88]

Ignore that last message, I'd moved the button to a different document on our end! My bad, should work now. (Obviously you'll need to download the new version of the code, I should really start a git repo for this :smileylaugh:)

[dave_perry]

The button is back, and a nicer icon - thanks.

I have added one line to your setColour function, so the (usually grey) bit in each module (that surrounds the items within it) gets its colour changed too (below the ig-row line of yours):

$('#context_modules').css("background-color", colour);

I tried the affect chat window hack (div id of root, when on a Chat page), but because Chat is an external tool (which is odd) I tried looking for 'external_tools/16' (on our tenant) in the window.location.href value - which didn't work. Something for another

[tbeaton88]

No problem!  

I'm glad that youre adapting the code! I may have to add it to the published version (if you don't mind )

We just got chat added to our instance a few hours ago, its a shame that they use an iframe, they've done the same on quizzes.next too. Unfortunately I don't think there's anything we can do about this

[dave_perry]

Feel free to add that line. Bummer about chat, I thought it would be a native tool so not be treated as an external one!

It's not working on our live site (it's like the javascript is being thrown away), but I'll deal with canvas on that one as it works fine on test!

[tbeaton88]

No probs! I'm glad people are using the code  Check if things are conflicting perhaps? If you have any other JS on your instance it may be worth moving line 2 to the top of your whole page? Do you have document.ready anywhere else in your JS file too? That's caused me issues in the past.

If anything else pops up or if you have any ideas for improvements please feel free to contact me

Thanks

[dave_perry]

Panic over, I blame the cloud taking its time to crunch things. It's working as expected on live.

[tbeaton88]

Ah awesome! One thing you can do to make sure changes have fully been made is:

(In Chrome)

1. Tap F12
2. Go to the 'Network' tab along the top
3. Check the box to the left of 'disable cache' (You may need to drag developer tools out a bit more to see it)
4. Tap F5/Refresh

(This will work immediately for any changes so there's no need to wait for any crunching  )