Using JS to Add Accessibility Features to Canvas

tbeaton88
Community Novice
18
4396

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:

306588_pastedImage_4.png

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

18 Comments
erin_cox
Community Novice

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
Community Novice

Yeh, it uses cookies to keep the users settings Smiley Happy

rosemary_saul
Community Explorer

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

tbeaton88
Community Novice

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 Smiley Happy Feel free to ask for help

dave_perry
Community Explorer

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?

Accessibility icon - hover over is not transparent

dave_perry
Community Explorer

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
Community Novice

Oh! How funky! I'll edit it when I'm in work tomorrow Smiley Happy 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
Community Explorer

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:

Accessibility tool - cannot change background on module items

Gap between previous/next buttons:

Accessibility tool - white 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):

Accessibility tool - white background in Chat page

Thanks

tbeaton88
Community Novice

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
Community Explorer

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
Community Novice

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
Community Novice

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
Community Explorer

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
Community Novice

No problem! Smiley Happy 

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

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 Smiley Sad

dave_perry
Community Explorer

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
Community Novice

No probs! I'm glad people are using the code Smiley Happy 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 Smiley Happy

Thanks

dave_perry
Community Explorer

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

tbeaton88
Community Novice

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 Smiley Wink )