mindjuice/accessibility-buttons

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

Accessibility Buttons

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

Usage

Download with Bower

	$ bower install accessibility-buttons --save

Download with NPM

	$ bower install accessibility-buttons --save

• Include the files

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

• Insert the buttons

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

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

Initialize the plugin

	accessibilityButtons();

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

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.