Add accessibility toolbar to your website with one line of code!
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
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!
- 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
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);
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
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})
Cancel menu buttons animations:
new Accessibility({animations: {buttons: false}})
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);
You can change the default icon as described here
Ran Buchnik |
Omar Flórez |