Taking the Axe to inaccessibility

Let's talk accessibility!

When you are developing apps for everyone it's great to have some cool tools in your belt. One of these tools is React Axe as brought you from Deque.

There are of couple ways you can use Axe. The first being an extension for dev tools Extensions.

google's Developer's Tools extension

Firefox Developer's Tools Add-on

To access Axe through the extension simply open your developer's tools and click the axe tab, then you can inspect your page.

Another way is to wrap your app in the Axe wrapper, and you do this by first installing @axe-core/react:

npm i axe-core/react --save-dev

or whatever you use to install

At this point, you head to the file your ReactDom.render set up, this is usually the index.{js,jsx,tsx}.

Once you've made it there it is a fairly straightforward setup to get it working.

First, you'll want to set it up so that the wrapper does not render in production, that would just be awkward like leaving random console.logs everywhere that say 'hi!'.

if (process.env.NODE_ENV !== 'production') {
// Not For Production
ReactDOM.render(app, document.getElementById('root'));
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}

Now, that we have that set up we can conditionally import our module.

if (process.env.NODE_ENV !== 'production') {
// Not For Production
 import('@axe-core/react').then(axe => {
        axe.default(React, ReactDOM, 1000);
        ReactDOM.render(app, document.getElementById('root'));
    });
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}

We can start up our project and open up our developer's tools and go to the console.

These Axe wrapper outputs should help in concurrent development, as well as open up conversions with your design team to discuss color contrast issues or other conversations about accessibility.

Comments

[Alessia]

The @axe-core/react cannot respond to the react-router route change(not evaluate the page switched by react-router), do you have any idea on how to solve this problem?

[⚡️Ren⚡️]

@alessia This was great that you asked this question, because I was able to find some errors in my personal website that need fixing. So I went through and was wondering why I wasn't having the problem with react-router specifically, and it's because when I followed the quick-start guide for web on the react-router docs, it actually has you have react-router-dom.

So when I switched the imports to import from react-router there were problems, likely mine had more to do with the with switching, but the update between pages should work if you update to importing from react-router-dom, I've also successfully used it with @reach/router.

Here is an example repo of where I'm using it with react-router-dom

I hope this kind of helps for now, I'll need to build a new test project to really dig in deeper.

[⚡️Ren⚡️]

I've not had that problem come up before, I'll take a look later today, and see if I have the same problems and try to work them out. If you need to get your pages check immediately, Deque axe does have a dev tools extension, or Lighthouse house a dev tools extension that will check the accessibility but also the performance. Additionally Deque came out with a VS Code extension that is an A11y linter.

I should probably also mention I don't work for Deque, but I do like their products. I'm so sorry you're having issues with the wrapper and I will try to get back with a solution in a timely manner.