axe-browser-reporter

Description

Axe reporter injected in the browser page if it detects any accessibility issue.

This project is made to make the accessibility development a top priority. As soon as an a11y rule is broken, the popup will simply appear and let you know how you can fix it. We strongly rely on axe-core

Installation

npm i axe-browser-reporter

Usage

In order for the plugin to kick in, make sure that your global environment variable process.env.NODE_ENV does equal 'development'. Otherwise, axe-browser-reporter won't run at all.

In your project, import axe-browser-reporter at the root of your project (e.g. an index.(js|ts) file).

import bootstrap from "axe-browser-reporter";
// Any setup code at root level of your app
bootstrap();

Options

Some options can be passed to bootstrap in order to tweak axe under the hood

import bootstrap from "axe-browser-reporter";

// Default values
bootstrap({
  allowlist: [],
  runIf: () => process.env?.NODE_ENV === "development",
});

allowlist

If there are rules you want axe-browser-reporter not to notify you about, you can specify them in an array of string like such. The argument is the id given from axe. The full list can be found here

import bootstrap from "axe-browser-reporter";

// Will ignore color-contrast and frame-tested a11y rules
bootstrap({
  allowlist: ["color-contrast", "frame-tested"],
});

runIf

If you want to change the condition on wheter to run axe-browser-reporter or not, you can specify a runIf attribute. Its signature is () => boolean

import bootstrap from "axe-browser-reporter";

const myBoolean = randomCondition ? true : false;

bootstrap({
  runIf: () => myBoolean,
});