ACCESSIBILITY

Add accessibility toolbar to your website with one line of code!

USAGE:

npm install accessibility

include script:

<script type="text/javascript" src="node_modules/accessibility/dist/main.bundle.js"></script>

or import:

import { Accessibility } from 'accessibility';

initialize component:

window.addEventListener('load', function() { new Accessibility(); }, false);

Full Documentation here

We are proud to announce that Joomla! are now using this repo as there built-in accessibility tool.

DESCRIPTION:

Features:

• increase text size
• decrease text size
• invert colors
• gray hues
• underline links
• big cursor
• reading guide
• text to speech
• speech to text
• suppress animations

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

Easy to use!

LIMITATIONS & 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)',

    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)'
};

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]
    disableAnimations: [true/false]
};

When the default is true

TEXT SIZE MANIPULATION APPROACHES:

If text increase / decrease isn't working for your size your probablly 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}})

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 as described here

LICENSE: