Accessibility is an important consideration that must be made when creating any new software solution. Over the years, this has often been overlooked, making it hard for people with disabilities to comfortably access the software.
This summer I had the pleasure of working with a group of Systems, Software Engineering MSc Students from University College London. Who have developed a Accessibility Toolbar for Jupyter Notebooks.
I would like to introduce to the team Joshua Zeltser, Tao Han, Norah Aba Numay, Fabiha Ahmed and Babatunde Adeola.
The following is a guest blog from Joshua Zeltser the team leader of the project.
In this project, we have focused on the digital accessibility of a Jupyter Notebook. We worked on enhancing the accessibility features already provided to users, such as improving screen-reader and keyboard focus support. We then developed an Accessibility Toolbar extension that provides additional vital accessibility features to notebook users who are dyslexic or visually impaired. These features include the ability to make style changes to the notebook, use predefined themes, carry out some common tasks using voice control, spell check inputted text and plan out one’s work using a planner. This toolbar provides users with the tools necessary to use a Jupyter Notebook to its full potential.
Toolbar Overview
Our Accessibility Toolbar adds a toolbar extension to your notebook with five separate accessibility features. For a summary of the features see: Accessibility Toolbar
The makeup of these tools is as follows:
|
Notebook Style Manager
· The aim of this feature is to provide the user with the tools to customise their notebook according to their own specifications. · This feature includes support for text size and font changes, line and letter spacing changes and various changes to the page’s colours. · There is also a predefined styles feature allowing for the saving and loading of saved page styles. · Feature summary can be found at: Notebook Style Manager |
 |
|
Spell Checker
· The aim of this feature is to provide spell checker functionality for all markdown cells in a notebook. · This feature includes the ability to notify the user of spelling errors inline. · It also provides a spell checker menu where words can be pasted and suggestions can be generated for the correct spelling of misspelt words. · New words can be added to the dictionary. · It is also possible to switch between bold or underlining notifications of spelling mistakes. · Feature summary can be found at: Spell Checker |
 |
|
Voice Control
· The aim of this feature is to provide voice control support for some of the common actions of a Jupyter Notebook. · Once enabled the toolbar will listen for any of these key actions and will then execute them. · Some example commands are “Run Cell”, “Restart Kernel” and “Show Planner” · The Voice Control feature is only supported on Chrome at the moment. · Feature summary can be found at: Voice Control
|
 |
|
Planner
· The aim of the Planner is to provide a way for a user to plan out their notebook before and during its creation. · The Planner is a Markdown text editor that is displayed at the side of the page and is saved together with the notebook. · The Planner includes all of the standard Markdown features, with shortcuts to some of them as buttons at the top. · Feature summary can be found at: Planner
|
 |
|
Accessible Themes · The aim of the accessible themes is to provide a high contract and dark theme mode for users depending on their preferences. · The themes can be easily toggled from the menu provided. · Feature summary can be found at: Themes
|
|
 |
 |
Toolbar Design
Our Accessibility Toolbar is made up of five core features to improve the accessibility of a notebook. We created our toolbar as a Nbextension, which can be easily enabled on the notebook homepage. Nbextensions was chosen over other mechanisms, like browser extensions, because they are easy to set up and provide cross-browser support. We also designed the toolbar using the adapter pattern to make it easily extendable. Each feature was created independently in its own class and added to the main adapter. The overall design of our toolbar can be seen in the figure below.
The loose coupling of the various features ensures that they work completely independently and were there to be any failures, other functionality will not be affected. All the features interact and modify the notebook’s front-end using jQuery. Visual changes to the notebook are done using CSS variables, importing custom CSS files and changing HTML element classes and style attributes. Only the voice control feature interacts with the Jupyter Notebook back-end using its API. This enables it to execute commands like "run notebook", "restart kernel", etc. The toolbar also makes use of external libraries to simplify the implementation of complex features.
Useful Links
- Installation Repo - https://github.com/uclixnjupyternbaccessibility/accessibility_toolbar
- Main Nbextensions repository: https://github.com/ipython-contrib/jupyter_contrib_nbextensions
- Our Nbextensions fork: https://github.com/uclixnjupyternbaccessibility/jupyter_contrib_nbextensions
- Our Docker testing repository: https://github.com/uclixnjupyternbaccessibility/accessibility_toolbar_tests
- Our videos: