netlify-plugin-a11y

Run your critical pages through pa11y and fail build if accessibility failures are found.

Demo

The demo site is a Gatsby blog that has been modified to have some inaccessible elements: https://netlify-plugin-a11y.netlify.com/

the Hello World page has an image with no alt text
the Second Post page has a form with no submit button, and an input with no label.

You can see the impact of the plugin in the deploy logs of this demo site: https://app.netlify.com/sites/netlify-plugin-a11y/deploys. By default, the plugin is set to error on failure:

But if that is too drastic, you can switch to resultMode = "warn" so that builds don't fail:

Usage

To install the plugin in the Netlify UI, use this direct in-app installation link or go to the Plugins directory.

For file-based installation, add the following lines to your netlify.toml file:

[[plugins]]
package = "netlify-plugin-a11y"

  # all inputs are optional, we just show you the defaults below
  [plugins.inputs]
  
  # required config
  checkPaths = ['/'] # you can give an array of directories or paths to html files, that you want to run a11y checks on

  ## Another checkPaths Example 
  checkPaths = [
    '/blog',
    '/about.html',
    '/super/specific/route/index.html',
  ]
  
  # # optional config
  # ignoreDirectories = ['/admin']  # explicitly ignore these directories

  # resultMode = "warn" # is "error" by default

  # # Developer only
  # debugMode = true # extra logging for plugin developers

To complete file-based installation, from your project's base directory, use npm, yarn, or any other Node.js package manager to add the plugin to devDependencies in package.json.

npm install -D netlify-plugin-a11y

Execution in Netlify

Once installed and configured, the plugin will automatically run in the Netlify CI during its specified Netlify Build lifecycle event.

Executing locally

To test the execution of the Netlify Build lifecycle locally, first ensure that netlify-build is installed:

# Ensure that you have the netlify build command available
# (in future this will be provided via the CLI)
npm install @netlify/build -g

# In the project working directory, run the build as netlify would with the build bot
netlify-build

Future plans