https://github.com/torres-developer/postcss-accessibility
PostCSS plugin that helps with the web accessibility guidelines
https://github.com/torres-developer/postcss-accessibility
Last synced: about 1 year ago
JSON representation
PostCSS plugin that helps with the web accessibility guidelines
- Host: GitHub
- URL: https://github.com/torres-developer/postcss-accessibility
- Owner: torres-developer
- License: mit
- Created: 2022-08-17T00:17:17.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-19T20:55:58.000Z (almost 4 years ago)
- Last Synced: 2025-01-22T21:14:45.645Z (over 1 year ago)
- Language: JavaScript
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-accessibility
[PostCSS] plugin that helps with the web accessibility guidelines.
[PostCSS]: https://github.com/postcss/postcss
```css
p {
background-color: hsl(192 62% 94%);
color: a11y-txt(hsl(192 62% 94%), 1.75em, 400);
font-size: 1.75em;
}
```
```css
p {
background-color: hsl(192 62% 94%);
color: hsl(192.63157894736838 61.290322580645174% 17%);
font-size: 1.75em;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-accessibility
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-accessibility'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage