Integrating the axe wrapper in your Next.js project

Why do I even need this?

Because you're a nice person, who wants to make sure everyone is accounted for when designing and developing your projects. Also, it is plausible you may be legally obligated, depending on funding or location, you may need to comply with web accessibility standards such as WCAG (Web Content Accessibility Guidelines). But really, there are millions of people that are affected by disabilities, so why not consider them as potential users of your software, and just start making your software accessible from the beginning.

Install axe-core/react

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

• You may also need to install react-dom if it is not in your dependencies

Once your dependencies are installed, you'll need to place the wrapper within one of your Next files. It works best if you choose a file that is a wrapper itself, like the pages/_app file, that way the axe wrapper will read the entire app.

Determine if you are running on the Server

Now that you have chosen the page you want to set up your axe-core wrapper, you need to write a method for checking whether you are rendering via server-side or client-side. Below is an example of how to do this.

const isServerSideRendered = () => {
  return typeof window === 'undefined'
}

You'll want to place this method outside of the React functional component or class setup. I put mine between my imports and the react component declaration.

What do you mean I need to import React?

Notably, we're using Next.js so we don't have to import React, but to set up the axe wrapper we'll need to import it into whichever file we've selected to place the wrapper.

Alright, we've imported React and set up our method for checking how the app is rendering. Now we can finally set up our axe wrapper.

Setting up the Axe wrapper

Ok, first we want to make sure this is not annoying to anyone but us, so you'll want the wrapper to conditionally render only when you're in your development environment. This is where we'll be using our isServerSideRendered method in conjunction with an environment check.

if (process.env.NODE_ENV !== 'production' && !isServerSideRendered()) {
    ...
}

Now comes the tricky part, setting up the wrapper. For this, I'm using dynamic imports so that the modules will only load within the development environment. We don't need unused modules loitering in production.

// Imports
//
// import React from 'react';
//

const isServerSideRendered = () => {
  return typeof window === 'undefined'
}

if (process.env.NODE_ENV !== 'production' && !isServerSideRendered()) {

    // we import react-dom and @axe-core/react dynamically
    // so that we'll receive warning in our console about
    // inaccessible code.

    import('react-dom').then((ReactDOM) => {
        import('@axe-core/react').then((axe) => {
            axe.default(React, ReactDOM, 1000, {})
        })
    })
}

// React component Declaration
// const App =()=>{return<></>}
// export default App;

You can find an example here in the next cli project that Mile Two is putting together for open source consumption.

It will give you results that will give the severity of the issue, a code snippet of the where the issue is found, and link to an explanation in detail as to why the issue is inaccessible.

And that is how you add the axe wrapper into your Next.js project! Thank you for reading!

If you are using VS Code, and want to make sure you are writing accessible code, you can install the axe Accessibility Linter.