cssinjs / cssinjs/jss

jss-plugin-a11y - jss support for WCAG 2.1

Open
#1,411 1 comment 0 reactions 0 assignees View on GitHub
feature request help wanted
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

__Is your feature request related to a problem? Please describe.__
The idea is to help using web (built with jss), by disabled or partially-disabled end-users.

I'd like to suggest a feature request in form of plugin enabling basic a11y jss transformations.

Rules should transform jss to be as close as possible to [WCAG 2.1 guideline](https://www.w3.org/TR/WCAG21/).
Mainly the plugin should support at least features like:
- `font-size` scaling based on chosen setting by the end-user - https://github.com/iamfrntdv/postcss-increase-text-sizes
- high-contrast mode - like in this postcss plugin: https://github.com/shiwaforce/postcss-high-contrast
- a nice feature could be logging warnings if we detect too little difference with background and font color like in css `color: #fff; background: #fefefe;` for the same selector.

Any other ideas for improvements are warmly welcome.

__Describe the solution you'd like__
When using the plugin, all CSS nodes should be transformed, based on options and end-user interactions.
Options should be passed to the plugin with API like this:
```
jss.use(jssA11yPlugin({showWarnings: true, ...someOtherOptions});

jssA11yPlugin.scaleFontSize(0.5);
jssA11yPlugin.resetFontSize();

jssA11yPlugin.applyHighContrast();
jssA11yPlugin.resetHighContrast();
```

Some more methods should be available to rebuild styles and reattatch stylesheets.
Same goes for exposing method for font scaling as well as contrast changing and interacting with other features.
Above is just a draft-like proposal.
There could be be some concerns for SRR, but I'm not sure.
Performance is another thing for concerns.

__Are you willing to implement it?__
Unfortunately, I don't have time to do it :(
But wanted to make a point about a11y.
Great work with jss! Using it lately a lot!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.