LIKED ? Leave a ⭐ : 😞

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

Read in other languages.

🇧🇷

Install

npm install accessibility-buttons --save

Usage

Import

• accessibility-buttons/dist/css/accessibility-buttons.css
• accessibility-buttons/dist/js/accessibility-buttons.js

Add buttons

<button type="button" data-accessibility="font">+A</button>
<button type="button" data-accessibility="contrast">Add Contrast</button>

Initialize after DOM ready

accessibilityButtons()

Note: Note: Font size works only with em or rem units.

Settings

To set up buttons names and aria-labels, use the following parameters.

// default values
accessibilityButtons({
    font: {
        nameButtonIncrease: '+A',
        ariaLabelButtonIncrease: 'Increase Font',
        nameButtonDecrease: '-A',
        ariaLabelButtonDecrease: 'Decrease Font'
    },

    contrast: {
        nameButtonAdd: 'Add Contrast',
        ariaLabelButtonAdd: 'Add Contrast',
        nameButtonRemove: 'Remove Contrast',
        ariaLabelButtonRemove: 'Remove Contrast'
    }
})

Font size and contrast colors could be customized only overwritting class values.

Example:

body {
    font-size: 1em;
    color: #a9a9a9;
    background: #000;
}

body input,
body textarea,
body select,
body button {
/* The default font-size of these elements is approximately 20% less than the body */
  font-size: 0.9em;
}

body.accessibility-font {
    font-size: 1.5em;
}

body.accessibility-font input,
body.accessibility-font textarea,
body.accessibility-font select,
body.accessibility-font button {
/* The default font-size of these elements is approximately 20% less than the body */
  font-size: 1.2em;
}

body.accessibility-contrast {
    color: #000;
    background: #a9a9a9;
}

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.