Buttons to add/remove contrast and increase/decrease font size.

Accessibility Buttons Repository Follow @tiagoporto Fork Issue Star

Usage

Download with NPM

npm install accessibility-buttons --save

Or download with Bower

bower install accessibility-buttons --save

Include the files

<link rel="stylesheet" href="node_modules/accessibility-buttons/dist/css/accessibility-buttons.css">
<script src="node_modules/accessibility-buttons/dist/js/accessibility-buttons.js"></script>

Insert the buttons

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

Initialize the Plugin after the dom ready

If you don't use jQuery (support IE9+)

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

ready(function() {
    accessibilityButtons();
});

If you use jQuery

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

Note: To get font-size to work, it's necessary to use "em" or "rem" units.

Settings

To set up buttons names and aria-labels, call the plugin with additional options.

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

    contrast: {
        nameButtonAdd: 'Add Contrast', //Default
        ariaLabelButtonAdd: 'Add Contrast', //Default
        nameButtonRemove: 'Remove Contrast', //Default
        ariaLabelButtonRemove: 'Remove Contrast' //Default
    }
});

To change font size and contrast colors, change the values in the accessibility-buttons.css.

.accessibility-font {
    /* First font-size fallback to older browsers*/
    font-size: 1.25em;
    font-size: 1.25rem;
}

.accessibility-contrast {
    color: #fff;
    background: #000;
}