Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 6 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: 2025-01-10T01:01:42.000Z (14 days ago)
- Last Synced: 2025-01-11T06:05:47.046Z (13 days ago)
- Topics: accessibility, buttons, contrast, font-size, hacktoberfest, javascript, library
- Language: HTML
- Homepage: https://tiagoporto.github.io/accessibility-buttons/
- Size: 3.6 MB
- Stars: 71
- Watchers: 9
- Forks: 31
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Buttons to add/remove contrast and increase/decrease font size.
[](https://github.com/tiagoporto/accessibility-buttons/releases)
[](https://www.npmjs.com/package/accessibility-buttons)
[](https://raw.githubusercontent.com/tiagoporto/accessibility-buttons/master/LICENSE)
[](https://coveralls.io/github/tiagoporto/accessibility-buttons)
## Read in other languages
- [🇧🇷](./README.pt-br.md)
- 🇺🇸
## Install
```bash
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](https://github.com/tiagoporto/.github/blob/main/CONTRIBUTING.md).
## License
This project is licensed under the [MIT License](LICENSE).