README.md

Accessibility Buttons

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

LIKE ? Leave a Star : Make a DEV sad

Table of Contents

• 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

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

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

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.