translate

accessibility


ACCESSIBILITY

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

Alt text

USAGE:

npm install accessibility

include script:

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

initialize component:

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

Full Documentation here

DESCRIPTION:

Features:

  • increase text size
  • decrease text size
  • invert colors
  • gray hues
  • underline links
  • text to speech
  • speech to text

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

Easy to use!

LIMITATIONS & KNOWN ISSUES:

  • Works with html5 brousers only (no IE8 and below)
  • Text to speech & speech to text works in supported brousers 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 = {

menuTitle: 'title (in my language)', increaseText: 'increase text size (in my language)', decreaseText: 'decrease text size (in my language)', invertColors: 'invert colors (in my language)', grayHues: 'gray hues (in my language)', underlineLinks: 'underline links (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],

grayHues: [true/false],

underlineLinks: [true/false],

textToSpeech: [true/false],

speechToText: [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 menu 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:

MIT License

Rating

ABOUT

LESS COMMENTS

MESSAGE REVIEW OK

Ok