Buttons to add/remove contrast and increase/decrease font size.
Branch: master
Clone or download
Latest commit 9b840d3 Oct 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PULL_REQUEST_TEMPLATE.md May 28, 2018
dist Update dependencies Oct 21, 2018
spec Added more tests Feb 18, 2016
src Update button styles Oct 21, 2018
translations Fix link readme Oct 21, 2018
.csslintrc
.editorconfig Update configs May 29, 2016
.eslintrc Add logo Mar 25, 2017
.gitattributes
.gitignore Minor changes Nov 3, 2016
.npmignore Minor changes Nov 5, 2016
.travis.yml Minor changes Nov 3, 2016
.yo-rc.json
CHANGELOG.md Update CHANGELOG.md Feb 17, 2017
CONTRIBUTING.md Updated contributing Nov 4, 2016
LICENSE Update license Nov 6, 2016
README.md Update dependencies Oct 21, 2018
bower.json Update bower.json Nov 6, 2016
config.json Add logo Mar 25, 2017
gulpfile.js
karma.conf.js Moved to phantomjs Nov 5, 2016
package-lock.json Update dependencies Oct 21, 2018
package.json Update dependencies Oct 21, 2018

README.md

Open Source Love

Accessibility Buttons

LIKED ? Leave a : 😞

Release Downloads License

Coverage Status devDependencies Status

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

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