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

Performance

On an MDM mac (16GB RAM, 2.2GHz 6core CPU), with all content variants enabled:

• 303 Personas
• 6 worker threads
• Execution time: 11m

References

• Pa11y

Results

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).