Free accessibility tools menu for website maintainers powered by jQuery. See the demo
Getting Started
CDN
Add the following imports (make sure to import jQuery before)
<script src="https://cdn.rawgit.com/jossef/open-accessibility/master/dist/open-accessibility.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/jossef/open-accessibility/master/dist/open-accessibility.min.css">
Bower
bower install open-accessibility --save
NPM
npm install open-accessibility --save
Initialization
In order for the plugin to load, it has to be initialized like so:
$('body').openAccessibility();
In addition, some default options may be overidden on initialization:
$('body').openAccessibility({
textSelector: 'h1,p'
});
Full list of default options:
isMenuOpened: false
highlightedLinks: false
isMobileEnabled: false
grayscale: 0
brightness: 100
contrast: 100
maxZoomLevel: 3
minZoomLevel: 0.5
zoomStep: 0.2
zoom: 1
cursor: false
textSelector: '.open-accessibility-text'
invert: false
iconSize: 'm',
localization: ['he']
Langual support
In order to use other language add the locale script file right after the open-accessibility.babel libary ( The order is important ).
<script src="dist/open-accessibility.min.js"></script>
<script src="dist/locale.min.js"></script>
and use localization property in configuration to set the primary language
localization: ['en']
You may want to extend the locale.js file, or the $.fn.openAccessibility.locale property in order to add your own language!
- We'll add a support for multilangual select in the menu, soon :)