Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

gatsby-plugin-axe-core-react

A Gatsby plugin to add @axe-core/react accessibility testing to Gatsby markup.

Install

yarn add @axe-core/react axe-core gatsby-plugin-axe-core-react --dev 

How to use

// In your gatsby-config.js

plugins: [`gatsby-plugin-axe-core-react`]

or

// In your gatsby-config.js

plugins: [
  {
    resolve: 'gatsby-plugin-axe-core-react',
    options: {
        axeConfig,
        axeContext,
        debounce,
    },
  },
]

React-axe will now print a11y warnings to your browser’s console. 🎉

Configuration options

You can use the following options if you wish to to override the default config.

axeConfig [object][optional]

The configuration object for axe-core.

axeContext [object][optional]

Used to specify which element should and which should not be tested.

debounce [number][optional][default: 1000]

The number of milliseconds to wait for component updates to cease before performing an analysis of all the changes.

© 2022 Gatsby, Inc.