Floating Accessibility Tools Menu - jQuery open-accessibility
File Size: | 42.4 KB |
---|---|
Views Total: | 1464 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

There are many different ways to make a website more accessible for people with disabilities. One easy way to do this is by adding a floating accessibility tools menu to your website.
This accessibility tools menu includes options to adjust font size, contrast, and other settings that can improve readability for users with disabilities. Plus, this menu is easy to use - just click the icon and select the setting you want to change. It will save the changes in local storage and automatically applies the settings on the next visit.
Accessibility Tools Included:
- Zoom in
- Zoom out
- Bigger Cursor
- Invert Color
- Contrast
- Brightness
- Greyscale
How to use it:
1. Load jQuery library and the open-accessibility
plugin's files in 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 the 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 function openAccessibility on the target container in which you want to place the floating menu.
$(function () { $('body').openAccessibility({ localization: ['en'] }); })
4. That's it. You can customize the Accessibility Tools by overriding the default options as displayed below:
$('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'], });
This awesome jQuery plugin is developed by jossef. For more Advanced Usages, please check the demo page or visit the official website.