3 ms·
I don't work on Chakra, I lead the team that builds Elastic's design library[0]. We take accessibility pretty seriously. In general this means: - We make sure
by snide 6y ago
I don't work on Chakra, I lead the team that builds Elastic's design library[0]. We take accessibility pretty seriously. In general this means:
- We make sure tab order and keyboard control is a equal level citizen.
- All our colors and palettes are backed by math, both for contrast and for color blind qualitative comparison.
- We build using semantic HTML and try to to avoid abstracting things like input controls and labels with too much magic.
- We test and build for screen reader support at the component level and then provide helpers for navigation. Usually, given the complexity, this means a decent mix of native html, aria, and hidden text to make things read correctly.
We do have some automated axe testing, but in all honesty, axes only gets the surface level spec and might cover 30% of what you need. The rest is really hand touched, backed by pretty strict review.
In general the bigger frameworks like ours are getting better at this stuff, but it's still fairly poorly considered in the industry overall. The specs are pretty verbose and poorly standardized against browsers. This make it very much like building a traditional visual frontend during the browser wars of the 2000s (I was there!).
Third party audits are normally done on the products themselves (in our case Kibana), not the framework itself. This ends up being an indirect method of auditing the framework though.
All our work is open source and documented. If you have any questions, please ask away. I love this stuff and web UI has been a 20-year passion for me.
[0]: https://elastic.github.io/eui/#/ https://elastic.github.io/eui/#/
- cheald 6y agoCan you elaborate on the tools you use to do color selection?
- snide 6y agoMostly it's a combination of tools. We write a lot of custom color functions (using Sass). You can check the src here[0]. A common one we'll use is makeHighContrastColor(), which given two colors will automatically make the first one a 4.5 AA accessible contrast by adding tint/shade. For palette generation, we do a lot of our work with tools like chroma.js[1] which can help with some colorblind math. [0]: https://github.com/elastic/eui/blob/master/src/global_styling/functions/_colors.scss#L64-L130 https://github.com/elastic/eui/blob/master/src/global_stylin... [1]: https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1 https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ff...
- cheald 6y agoBeautiful. Thank you so much!