In order to check our work for accessibility, we'll install a couple of packages, so let's follow the procedure mentioned: one for static checks when writing code, using ESLint, and another for dynamic checks when running our application. And, if you ask yourself Why two tools instead of only one?, the answer is that a static tool cannot check everything: for example, if you assign a variable's value to a title, will that value not be empty at run time? On the other hand, since all your code is linted, you got a chance to detect some things that could be missed during normal tests, so by using two tools you are not doing redundant work, but rather increasing the odds of finding accessibility problems.

Installing the ESLint module is quite simple. First, we'll use npm to add the package:

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

Then, we'll have to modify our .eslintrc file a bit, adding the new plugin, and specifying what rules we want to enforce:

{
    .
    .
    .
    "extends": [
        "eslint:recommended",
        "plugin:flowtype/recommended",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended"
    ],
    "plugins": ["babel", "flowtype", "react", "jsx-a11y"],
    .
    .
    .
}

The second addition we want is react-a11y, a package that modifies React rendering functions internally, so accessibility problems can be detected at runtime. Installation is simple:

npm install react-a11y --save

Then, at the start of your application, you'll have to initialize the a11y module, along with the rules you want to check. The format of the rules is the same as ESLint uses. Check https://github.com/reactjs/react-a11y/tree/master/docs/rules for the complete list, because new rules may be added. (You'll also have to see that list in order to learn which rules, if any, have special options.) By default, all rules are "off", so you must explicitly turn them on to "warn" or "error". A full configuration would be as follows, as of December 2018:

import React from "react";
import ReactDOM from "react-dom";
import a11y from "react-a11y";

a11y(React, ReactDOM, {
    rules: {
        "avoid-positive-tabindex": "warn",
        "button-role-space": "warn",
        "hidden-uses-tabindex": "warn",
        "img-uses-alt": "warn",
        "label-uses-for": "warn",
        "mouse-events-map-to-key-events": "warn",
        "no-access-key": "warn",
        "no-hash-ref": "warn",
        "no-unsupported-elements-use-aria": "warn",
        "onclick-uses-role": "warn",
        "onclick-uses-tabindex": "warn",
        "redundant-alt": ["warn", ["picture", "image", "photo", "foto", 
        "bild"]],
        "tabindex-uses-button": "warn",
        "use-onblur-not-onchange": "warn",
        "valid-aria-role": "warn"
    }
});

// a11y.restoreAll() would undo all changes

We have everything set up; let's now see how all of this comes together.