Ensuring Accessibility

I’ve been studying different strategies to help Frontity users maintain accessibility and I think we can help in two ways:

  1. Add eslint to npx frontity create, including the eslint-plugin-jsx-a11y plugin.
  2. Add react-axe to Frontity.

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 <img> tag:

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-a11y or add it by default?
  • Should we only have instructions on how to install the aXe extension or add react-axe by default?
  • If added, should they be opt-in or opt-out?
1 Like

Of course more ideas on how to help/ensure accessibility on Frontity themes are welcomed :slight_smile: