/accessibility-toolbar

Primary LanguageHTML

accessibility-toolbar

Welcome to Waterloo iGEM's accessibility toolbar repo! The features of this toolbar are read aloud (play, pause, restart), adjust font size, and keyboard shortcuts. It was built using Mousetrap and Articulate.js.

expanded not expanded

View the toolbar in action on our 2020 Wiki and see our implementation using this toolbar on github here.

How to use the tool

  1. Download the files in the Toolbar folder.
  2. Include the accessibility toolbar into your html pages using:
<script>
 $(function() {
     $('accessibility').load(' PATH TO THE accessibility.html file');
 });
</script>

and then place the toolbar in your html with <accessibility></accessiblity> .

  1. Add the css to your existing css for your wiki.
  2. Add the scripts to your scripts folder.
  3. Customize accessibility.js to your needs as indicated in the comments of that file.

Future Improvements

This toolbar is a work in progress. In future iterations, we want to include:

  • Repeat or skip to next paragraph in read-aloud screen-reader
  • Word-highlighter (as the screen-reader plays)
  • Customizable colour palettes (for various types of colour-blindness)