Change Font Size And Page Contrast - jQuery Accessibility Buttons

A jQuery plugin to create accessibility buttons that increase/decrease font size of your text and add/remove contrast of your webpage.

Installation:

# NPM
$ npm install accessibility-buttons

# Bower
$ bower install accessibility-buttons

How to use it:

1. Import the jQuery Accessibility Buttons' JavaScript and CSS files into the webpage.

<link href="accessibility-buttons.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="accessibility-buttons.js"></script>

2. Create the Accessibility Buttons:

<button aria-label="Increase Font" id="accessibility-font" class="js-acessibility">Increase Font Size</button>
<button aria-label="Add Contrast" id="accessibility-contrast" class="js-acessibility">Add Contrast</button>

3. Initialize the plugin on document ready and you're done.

$(document).ready(function() {
  accessibilityButtons();
})

4. Default plugin settings to customize the Accessibility Buttons:

{
  font: {
    nameButtonIncrease: '+A',
    ariaLabelButtonIncrease: 'Increase Font',
    nameButtonDecrease: '-A',
    ariaLabelButtonDecrease: 'Decrease Font'
  },

  contrast: {
    nameButtonAdd: 'Add Contrast',
    ariaLabelButtonAdd: 'Add Contrast',
    nameButtonRemove: 'Remove Contrast',
    ariaLabelButtonRemove: 'Remove Contrast'
  }
}

Changelog:

v4.0.0 (08/17/2020)

• Replace id by data-accessibility

v3.1.2 (10/22/2018)

• Update styles

---

This awesome jQuery plugin is developed by tiagoporto. For more Advanced Usages, please check the demo page or visit the official website.