[FEATURE] Add accessibility modal or feature to control multiple css variables around the project

[iruzevic]

For example something like this but more cool

[mbmjertan]

I've had a deeper dive into this, and here are my thoughts on this feature.

I'm not sure what would be a good approach to implementing this in Frontend Libs. (In practical terms that is, it's perfectly clear that CSS variables would be a good technical implementations)

Would this be used to provide an alternate WCAG-conformant version of the page? Or to provide general assistive features? In the first case, this doesn't make sense to implement in Frontend Libs, as they're designed to be accessible by default.

Looking at examples of this feature across the web:

• The APIS one seems to do both at first glance (as dyslexia accommodations aren't part of WCAG, and contrast is, for example).
• The gov.hr one seems to be a bit better, as it provides an alternative conformant version where gov.hr isn't WCAG-conformant by default.
• Srce.hr has worse contrast in some places if you enable increased contrast
• gov.uk and Wikipedia have no such feature, as they're designed to be accessible by default

The reason why I'm saying this is because a lot of things here don't necessarily make sense to support: increase font size - zoom is a much better alternative in most cases, as it's instantly synced across tabs in some (all?) browsers. Also, we can't use --base-font-size for this, as it's used for UI as well, meaning that everything scales awfully bad if we change that.

For example, this is productive.io if I zoom in to 200%:

This is productive.io if I change --base-font-size to twice the initial value:

Browser zoom also supports setting defaults across sites:

Things that browsers also support, but that would be nice to have:

Increasing link visibility - seems cool to implement on projects where links aren't distinguishable (although I believe this should be avoided by designers)

Font tweaks (size, weight, line height, letter spacing, family/dyslexia accommodations) - these also seem cool to have.

Contrast - we should provide an alternative color scheme for people who prefer increased contrast and respect media queries for that (or ship with good contrast to begin with)

However, I'm not sure if it's worth spending time on implementing accommodations that browsers already ship with. I'm not sure which approach users prefer more.

Examples of these settings in Firefox:

If we end up pursuing this, I'd gladly work on it. However, we should:

• [ ] investigate what implementation approaches make sense for users (browser/OS level support which we hook into using media queries vs. these tools)
• [ ] define which accommodations we want to support here

I'm also concerned that this could decrease developer's and designers willingness to follow WCAG by default, relying on this to provide alternative versions.

[dingo-d]

I wouldn't push this into the libs. If we would add something like this, I'd rather make it a separate JS/PHP package that can be pulled into the project per project requirement.

[goranalkovic-infinum]

Let's focus on having everything as accessible and possible, push designers to do the same, and if needed a simple "CSS variable manipulator" can be built relatively easily, but probably doesn't need to be part of Libs.