Buttons to add/remove contrast and increase/decrease font size.
LIKE ? Leave a Star : Make a DEV sad
Download with NPM
$ npm install accessibility-buttons --saveOr download with Bower
$ bower install accessibility-buttons --saveInclude 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.
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;
}Accessibility arial-label tip - Bruno Pulis
Included the $ sign in the variable name of the cached elements for easy identification - Adler Parnas
Accessibility Buttons is released under the terms of the MIT license.