Skip to content

jossef/open-accessibility

Repository files navigation

image

Build Status

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.json 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 :)