Accessibility Buttons

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

LIKE ? Leave a Star : Make a DEV sad

Usage
Settings
Credits
License

Usage

Download with NPM

$ npm install accessibility-buttons --save

Or download with Bower

$ bower install accessibility-buttons --save

Include the Files

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="node_modules/accessibility-buttons/dist/css/accessibility-buttons.css">
</head>
<body>
	<!-- content -->

	<script src="node_modules/accessibility-buttons/dist/js/accessibility-buttons.js"></script>
</body>
</html>

Insert the Buttons

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="node_modules/accessibility-buttons/dist/css/accessibility-buttons.css">
</head>
<body>
    <button aria-label="Increase Font" id="accessibility-font" class="js-acessibility">+A</button>
    <button aria-label="Add Contrast" id="accessibility-contrast" class="js-acessibility">Add Contrast</button>

	<!-- content -->

	<script src="node_modules/accessibility-buttons/dist/js/accessibility-buttons.js"></script>
</body>
</html>

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 button names and aria-labels, call the plugin with additional options as shown below:

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;
}

Contributing

See how to contribute.

Credits

Accessibility arial-label tip - Bruno Pulis

Included the $ sign in the variable name of the cached elements for easy identification - Adler Parnas

License

Accessibility Buttons is released under the terms of the MIT license.

wanjarus / accessibility-buttons Goto Github PK