Open accessibility tools for website maintainers powered by jQuery. The Accessibility Tools menu includes options to adjust the font size, contrast, and other settings that can improve readability for users with disabilities.
Accessibility Tools Included:
- Invert Color
- Contrast
- Brightness
- Greyscale
- Zoom in
- Zoom out
- Bigger Cursor
How to make use of it:
1. Load the jQuery library and open access plugin files into the document.
<!-- Required --> <link rel="stylesheet" href="/path/to/dist/open-accessibility.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/dist/open-accessibility.min.js"></script> <!-- Optional --> <script src="/path/to/dist/locale.min.js"></script>
2. Add CSS class “open-accessibility-text” to your text.
<h1 class="open-accessibility-text">Open Accessibility Plugin Examples</h1> <p class="lead open-accessibility-text">A floating accessibility tools menu that can improve readability for users with disabilities.</p>
3. Call the openAccessibility function on the target container where you want to place the floating list.
$(function () {
$('body').openAccessibility({
localization: ['en']
});
})4. You can customize the accessibility tools by overriding the default options.
$('body').openAccessibility({
// open the menu on page load
isMenuOpened: false,
// enable the plugin on mobile
isMobileEnabled: false,
// override the settings of the Accessibility Tools
grayscale: 0,
brightness: 100,
contrast: 100,
maxZoomLevel: 3,
minZoomLevel: 0.5,
zoomStep: 0.2,
zoom: 1,
cursor: false,
invert: false,
// text selector
textSelector: '.open-accessibility-text',
// s(mall), m(edium), l(arge)
iconSize: 'm',
// local
localization: ['he'],
});Floating Accessibility Tools Menu, open-accessibility Plugin/Github
See Demo And Download
Official Website(jossef): Click Here
This superior jQuery/javascript plugin is developed by jossef. For extra Advanced Usages, please go to the official website.