@dwp/casa-spiderplan-a11y-plugin NPM

Accessibility Plugin for casa-spiderplan

Add accessibility testing to your Spiderplan Personas.

Features:

Uses Pa11y to scan each waypoint as a Persona journey is traversed with both axe-core and htmlcodesniffer rulesets
Ensures HTML syntax is valid, using HTMLHint
Compiles findings into a report compatible with GitLab CI's dashboard

This is not a replacement for full acessibility testing. Refer to DWP's accessibility manual for more thorough guidance.

Pre-requisites

NodeJS 18+

NOTE: The version of puppeteer in package.json must ideally match that used by pa11y, otherwise two different Chromium versions will be downloaded.

Getting started

Install the plugin:

npm i -DE @dwp/casa-spiderplan-a11y-plugin

Configure your worker bootstrap script to enable this plugin:

const a11y = require('@dwp/casa-spiderplan-a11y-plugin');

module.exports = ({ sharedState }) => {
  // Other setup stuff ..

  // Load hooks
  const hooks = [
    ...await a11y({
      // Output directory to store results and temporary files
      dir: '.a11y/',

      // List of waypoints that will not have content variants tested
      ignoreVariants: [],

      // Disable content variant testing
      disableVariants: true,

      // Shared memory (required)
      sharedState,
    }),
  ];

  // Along with the other worker-init attribute, return the "hooks" attribute
  // containing the list of hooks that will be used
  return {
    hooks,
  };
};

Run your Spiderplan tests as normal.

Results are written to an output directory in both a JSON file (output/results.json) and a series of HTML reports (indexed by output/index.html).

Process overview

The following Spiderplan hooks are used:

post-get-waypoint Sets up a browser context if not already available, and tests the waypoint content as retrieved by the first GET request
post-process-persona Tears down browser context and stores results for all waypoints tested by the worker in this Persona, and runs the htmlhint syntax checker