Floating Accessibility Tools Menu - jQuery open-accessibility

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.