Change Font Size And Page Contrast - jQuery Accessibility Buttons

File Size: 373 KB
Views Total: 9224
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


$ 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="//"></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() {

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'


v4.0.0 (08/17/2020)

  • Replace id by data-accessibility

v3.1.2 (10/22/2018)

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