mustafauysal / accessibility

add accessibility to your website

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
• increase line height
• decrease line height
• invert colors
• gray hues
• underline links
• big cursor
• reading guide
• text to speech with 3 reading velocities
• 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)',     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)' };

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 = {     decreaseText: [true/false],     increaseText: [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

TEXT SIZE MANIPULATION APPROACHES:

If text increase / decrease isn't working for your size your probably not using responsive font size units (such 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: