JSHack: Add Accessibility Toolbar (ATbar) to Blackboard

Document created by mdeeprose on Jun 12, 2019Last modified by mdeeprose on Jun 13, 2019
Version 3Show Document
  • View in full screen mode

The Accessibility Toolbar (ATbar) is a browser based toolbar to aid accessibility of websites with the option to change the look and feel of webpages through text only enlargement, font style and colour changes plus increased line spacing. There are also features for text to speech, a dictionary, spell checking, word prediction and colour overlays.


This is an open source project created by the Accessibility team in the School of Electronics and Computer Science at the University of Southampton.


I have made a JSHack that enables this toolbar in Blackboard.  Thanks to Ester Muñoz Aparicio for giving me pointers on how to do this.


You will need the JSHack building block to use this.


The hack contains a css file in the resources subdirectory that you can use to change the position of the icon which when clicked upon pulls the toolbar down.  The toolbar is only present until you close it or move to another Blackboard page.  This is the first version of the toolbar and has been tested only on 9.1 2018 Q4 CU5 and CU6.  Use at your own risk and test in a development environment first.  I am eager to hear any suggestions for improvements.


Once installed a button labelled ATbar appears on every screen:

When clicked upon the toolbar is displayed:

An explanation of what all the icons do is here:  Instructions | ATbar 

The "fix the web" button to report accessibility issues is not currently working.  This is an issue with toolbar itself rather than the jshack


Here you can watch a video demonstration of the text to speech read out: 

If video does not play here is a direct link: http://go.soton.ac.uk/axq  



- toolbar covers logout button and avatar area

- toolbar not visible in mobile view

- it looks a bit funny in student preview mode


I would be happy to see others suggests ways to fix that or any other improvements.



You can download the hack package at: https://mle.southampton.ac.uk/bb/jsh/ATBAR.zip  

Get the JSHack building block at: Releases · AllTheDucks/jshack-v1 · GitHub