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.