accessibility

accessibility copied to clipboard

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/dist/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:

• [x] increase text size
• [x] decrease text size
• [x] invert colors
• [x] gray hues
• [x] underline links
• [x] big cursor
• [x] reading guide
• [x] text to speech
• [x] speech to text
• [x] 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

Maintainers

Ran Buchnik

Omar Flórez

LICENSE: