Skip to content

tiagoporto/accessibility-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

709796a · Feb 16, 2017
Feb 16, 2017
Feb 18, 2016
Feb 16, 2017
Nov 3, 2016
May 29, 2016
Nov 5, 2016
May 29, 2016
Nov 3, 2016
Nov 5, 2016
Nov 3, 2016
Nov 5, 2016
Feb 16, 2017
Nov 4, 2016
Nov 6, 2016
Feb 16, 2017
Nov 6, 2016
Nov 4, 2016
Nov 4, 2016
Nov 5, 2016
Feb 16, 2017

Repository files navigation

Accessibility Buttons

Build Status Coverage Status devDependencies Status NPM Downloads Github Release Github License

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

StarStarStar
LIKE ? Leave a Star : Make a DEV sad

Table of Contents

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.