Auditing tools for accessibility

Tools

ESLint

npm install eslint eslint-plugin-jsx-a11y --save-dev

You need to configure the linter :

eslintrc.json:

{
    "extends":[
        "react-app", "plugin:jsx-a11y/recommended"
    ],
    "plugins":[
        "jsx-a11y"
    ]
}

And you need to add scripts to run it in your package.json:

"scripts"{
  "lint": "eslint src"
}

Axe

It comes in three flavors: a browser extansion, axe-cli to run it through the command line and react-axe that will output message in the browser console.

To install axe-cli :

npm install chromedriver --chromedriver-force-download -D
npm install axe-cli -D

You can add a script in your package.json:

  "scripts": {
     "axe": "axe your_url_you_want_to_test",
  },

And then I can run the axe test from the command line:

npm run test

To install react-axe:

npm install react-axe -D

To configure and run react-axe, add the following in the file that starts up your application:

if (process.env.NODE_ENV !== "production") {
  var axe = require("react-axe");
  axe(React, ReactDOM, 1000);
}

The axe constructor accepts a fourth arguments to configure its behavior:

var config = {
  rules: [
    {
      id: "radiogroup",
      enabled: true
    }
  ]
};
if (process.env.NODE_ENV !== "production") {
  var axe = require("react-axe");
  axe(React, ReactDOM, 1000, config);
}

tota11y brower extansion

A great plugin you can download from the store that allows you to see visually you accessibility report. You can check for accessibility against Headings, Contrast, Link text, Labels, Image alt-text and Landmarks.

Color contrast tools

First, in Chrome DevTools you can inspect an element that has insufficient color contrast, look at the color style and click on that, right here Chrome tells you that the contrast ratio's insufficient with this icon and provide some additional info about the recommanded alternatives.

Second tota11y with its Contrast checker will suggest an alternative for any element with contrast ratio issue.

There is also a nice chrome extansion to help you find a good match between foreground and background color to have a good contrast ratio.