Buttons to add/remove contrast and increase/decrease font size.
Read this in other languages.
Table of Contents
Usage
Download with NPM
npm 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: It's necessary use em or rem units in font-size.
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
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.
