I’ve been studying different strategies to help Frontity users maintain accessibility and I think we can help in two ways:
- Add eslint to
npx frontity create, including the
jsx-a11y is useful while in the editor. It alerts when you are forgetting something. For example, here I forgot the
alt attribute of an
If we don’t install it by default,
jsx-a11y can be easily installed by the developers. We could help with instructions.
react-axe analyzes the DOM instead of the React components, and outputs warnings in the Chrome console:
It’s smarter because it looks at the DOM. This is important because many accessibility issues exist at the intersection of the DOM and the CSS and unless you have a fully rendered DOM.
There’s a great Chrome extension that does pretty much the same although it is opt-in (you need to open its tab and click analyze, whereas with
react-axe the warnings always appear in the console).
The questions here are:
- Should we only have instructions on how to install
jsx-a11yor add it by default?
- Should we only have instructions on how to install the aXe extension or add
- If added, should they be opt-in or opt-out?