accessible Adaptive Accessibility Menu

add accessibility toolbar to every website with one line of code

features

manipulate text size
increase or decrease text size. works with em / rem / px or any type of font-size units
unfold_more
manipulate text spacing
increase or decrease text space. works with em / rem / px or any type of letter-spacing units
invert_colors
invert colors
toggles the document's body background color from black to white and the default text color from white to black and vice versa
format_color_reset
gray hues
turns the site to gray hues only - images including
underline links
mark links with underline
border_horizontal
reading guide
add a horizontal line that bind to the mouse or touch position
big cursor
Replacing the default mouse cursor with a bigger one
record_voice_over
text to speech
let's the user select any text on site and enabling the browser's automatic reading feature (works in supported browsers only)
mic
speech to text
by enabling that feature the user will be able to speak and the browser will interpret his words to text (works in supported browsers only)
hotkeys
Use keyboard shortcuts to toggle modules / features

Limitations and Known Issues

Works with html5 browsers only (no IE8 and below)

Text to speech & speech to text works in supported browsers and languages only

Gray hues is disabled in firefox due to a bug in firefox browser and will be enabled when it will be fixed

multi language example

var labels = {
    resetTitle: 'reset (in my language)',
    closeTitle: 'close (in my language)',
    menuTitle: 'title (in my language)',
    increaseText: 'increase text size (in my language)',
    decreaseText: 'decrease text size (in my language)',
    increaseTextSpacing: 'increase text spacing (in my language)',
    decreaseTextSpacing: 'decrease text spacing (in my language)',
    invertColors: 'invert colors (in my language)',
    grayHues: 'gray hues (in my language)',
    underlineLinks: 'underline links (in my language)',
    bigCursor: 'big cursor (in my language)',
    readingGuide: 'reading guide (in my language)',
    textToSpeech: 'text to speech (in my language)',
    speechToText: 'speech to text (in my language)'
};
var options = { labels: labels };
options.textToSpeechLang = 'en-US'; // or any other language
options.speechToTextLang = 'en-US'; // or any other language
new Accessibility(options);

disable features example

options.modules = {
    increaseText: [true/false],
    decreaseText: [true/false],
    invertColors: [true/false],
    increaseTextSpacing: [true/false],
    decreaseTextSpacing: [true/false],
    grayHues: [true/false],
    underlineLinks: [true/false],
    bigCursor: [true/false],
    readingGuide: [true/false],
    textToSpeech: [true/false],
    speechToText: [true/false]
};

When the default is true

hotkeys module

This module is disabled by default

var options = {
    hotkeys: {
        enabled: [true/false]
    }
};
new Accessibility(options);


Help text is active by default in the buttons title, you can disable or enable setting in   options.hotkeys.helpTitles = [true/false];

Hotkeys Defaults

Module or Function Hotkey
Toggle Menu CTRL + ALT + A
Gray Hues CTRL + ALT + G
Underline Links CTRL + ALT + U
Big Cursor CTRL + ALT + C
Reading Guide CTRL + ALT + R
Text To Speech CTRL + ALT + T
Speech To Text CTRL + ALT + S

text size manipulation approaches

The default approach is textEmlMode: false meaning we are changing the html's percentage.

You can also try the legacy approach, witch changes the body's pixels instead of the html's percentage.

new Accessibility({textEmlMode: false})

If text increase / decrease isn't working for your size you're probably not using responsive font size units (sutch as em, rem etc.).

In that case you can initialize the accessibility tool like this:

new Accessibility({textPixelMode: true})

animations

Cancel all buttons animations:

new Accessibility({animations: {buttons: false}})

free

code
open source
This project is an open source one.
GitHub Repo

Fell free to star star this repository if it helped you.

you can also open an issue if necessary.

code
npm package
Fell free to star star this package if it helped you.

positioning

You can position the accessibility icon in any place on the screen. The default position is bottom right:

var options = {

icon: {

position: {

bottom: { size: 50, units: 'px' },

right: { size: 0, units: 'px' },

type: 'fixed'

}

}

}

new Accessibility(options);


But you can also position the icon in the upper left corner of the screen and cancel the fixed positioning:

var options = {

icon: {

position: {

top: { size: 2, units: 'vh' },

left: { size: 2, units: '%' },

type: 'absolute'

}

}

}

new Accessibility(options);

icon image

You can change the default icon from this ('accessible'): accessible

To this this ('accessibility'): accessibility

Or change the shape of the icon to a circular one: accessibility

var options = {

icon: {

circular: [true/false],

img: ['accessibility'/'accessible'],

}

}

new Accessibility(options);


By default, this module is using Material Design Icon witch means that the material-icons font-face will be loaded automatically.

If you want you can chooes to use Emojis instead:

var options = {

icon: {

useEmojis: [true/false],

}

}

new Accessibility(options);


In case the material-icons font-face was not loaded for any reason the module will automatically fallback to Emojis icons.

persistent session

From version 3.0.1 the session will be persistent even after the user will refresh the page.

To disable this feature use:

var options = {

session: {

persistent: false

}

}

new Accessibility(options);

direct access to the API

You can toggle the menu buttons directly via the exposed API:

var instance = new Accessibility(options);

instance.menuInterface.increaseText();

instance.menuInterface.decreaseText();

instance.menuInterface.increaseTextSpacing();

instance.menuInterface.decreaseTextSpacing();

instance.menuInterface.invertColors();

instance.menuInterface.grayHues();

instance.menuInterface.underlineLinks();

instance.menuInterface.bigCursor();

instance.menuInterface.readingGuide();

instance.menuInterface.textToSpeech();

instance.menuInterface.speechToText();


You can also override the functionality like this:

instance.menuInterface.increaseText = function() {

// My own way to increase text size . . .

}

Testing for Speech to Text

license

MIT License