accessibility
Advanced tools
add accessibility to your website
Weekly downloads
Readme
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/main.bundle.js"></script>
or import:
import { Accessibility } from 'accessibility';
initialize component:
window.addEventListener('load', function() { new Accessibility(); }, false);
We are proud to announce that Joomla! are now using this repo as there built-in accessibility tool.
Features:
Does not depend any other directory (jQuery is not required). Easy to use!
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);
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
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})
Cancel all 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
FAQs
add accessibility to your website
The npm package accessibility receives a total of 671 weekly downloads. As such, accessibility popularity was classified as not popular.
We found that accessibility demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.