accessible Adaptive Accessibility Menu

features

easy to use!

1. Does not depend any other directory (jQuery is not required)

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

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)',
    increaseLineHeight: 'increase line height (in my language)',
    decreaseLineHeight: 'decrease line height (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)'
    disableAnimations: 'disable animations (in my language)'
    hotkeyPrefix: 'Hotkey: (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],
    increaseLineHeight: [true/false],
    decreaseLineHeight: [true/false],
    grayHues: [true/false],
    underlineLinks: [true/false],
    bigCursor: [true/false],
    readingGuide: [true/false],
    textToSpeech: [true/false],
    speechToText: [true/false]
    disableAnimations: [true/false]
};

When the default is true

hotkeys module

This module is disabled by default

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

Hotkeys Defaults

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.

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:

You can change the factor of the font size difference between every iteration (default is 12.5)

animations

Cancel all buttons animations:

free

positioning

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

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

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:

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:

direct access to the API

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

You can also override the functionality like this:

add custom iframe

You can add buttons that will open a model with custom iframes (for accessibility terms for example) like so:

In case you will not provide the "icon" and the "emoji" we will use this setup:

icon: 'policy',
emoji: '⚖️'

You can find icons here

add custom functions

You can add buttons that will invoke custom functions like so:

In case you will not provide the "icon" and the "emoji" we will use this setup:

icon: 'psychology_alt',
emoji: '❓'

You can find icons here

You have to provide the "id" parameter. This would also be your way to identify the button in case you are using more then on function while using the same custom function.

You have to provide the "toggle" parameter. This will determine whether the button will toggle his state active state (on and off) or not.

customize styling

You can use CSS variables to change the styling of the menu. Here is an example of how you can change the exposed variables in order to change the theme to dark mode:

Alternatively, you can suppress the default CSS injection altogether (not recommended):

new Accessibility({suppressCssInjection: true});

You can also replace the icons by replacing the content attribute with the CSS variables currently being used.

You can suppress the default HTML injection altogether: const instance = new Accessibility({suppressDomInjection: true});. You will need to provide your own DOM and call menuInterface functions.

You might need to replace the font-face-src:

Another example with font-awesome icons:

Obviously you will need to add the missing variables for the rest of the fonts.

change modules order

You can determine the order of the modules:

Pause animations

Testing for Speech to Text

license