https://github.com/tiagoporto/accessibility-buttons

Buttons to add/remove contrast and increase/decrease font size.
https://github.com/tiagoporto/accessibility-buttons

accessibility buttons contrast font-size hacktoberfest javascript library

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tiagoporto/accessibility-buttons
• Owner: tiagoporto
• License: mit
• Created: 2014-08-07T18:42:47.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2024-07-22T14:42:14.000Z (4 months ago)
• Last Synced: 2024-10-18T23:13:00.054Z (20 days ago)
• Topics: accessibility, buttons, contrast, font-size, hacktoberfest, javascript, library
• Language: JavaScript
• Homepage: http://tiagoporto.github.io/accessibility-buttons/
• Size: 3.19 MB
• Stars: 69
• Watchers: 9
• Forks: 32
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        






  LIKED ? Leave a ⭐ : 😞



[![Release](https://img.shields.io/npm/v/accessibility-buttons.svg?style=flat-square&label=release)](https://github.com/tiagoporto/accessibility-buttons/releases)

[![Downloads](https://img.shields.io/npm/dt/accessibility-buttons.svg?style=flat-square)](https://www.npmjs.com/package/accessibility-buttons)

[![License](https://img.shields.io/github/license/tiagoporto/accessibility-buttons.svg?style=flat-square)](https://raw.githubusercontent.com/tiagoporto/accessibility-buttons/master/LICENSE)

[![Coverage Status](https://img.shields.io/coveralls/tiagoporto/accessibility-buttons.svg?style=flat-square)](https://coveralls.io/github/tiagoporto/accessibility-buttons)

[![devDependencies Status](https://img.shields.io/david/dev/tiagoporto/accessibility-buttons.svg?style=flat-square)](https://david-dm.org/tiagoporto/accessibility-buttons?type=dev)

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

## Read in [other languages](translations/translations.md).

[🇧🇷](translations/README.pt_br.md)

## Install

```

npm install accessibility-buttons --save

```

## Usage

Import

- accessibility-buttons/dist/css/accessibility-buttons.css

- accessibility-buttons/dist/js/accessibility-buttons.js

Add buttons

```html

+A

Add Contrast

```

Initialize after DOM ready

```js

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.

```js

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

```css

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](CONTRIBUTING.md).

## Credits

Accessibility `arial-label` tip - [Bruno Pulis](https://github.com/brunopulis)

Included the `$` sign in the variable name of the cached elements for easy identification  - [Adler Parnas](https://github.com/adlerparnas)

## License

Accessibility Buttons is released under the terms of the [MIT license](https://github.com/tiagoporto/accessibility-buttons/blob/master/LICENSE).