jQuery Open Accessibility Tools Menu For Website


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 () {
    localization: ['en']

4. You can customize the accessibility tools by overriding the default options.


  // 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.