DDEV Pa11y Add-on

• What is DDEV Pa11y Add-on?
• Components of the repository
• Getting started

What is DDEV Pa11y Add-on?

This repository provides a DDEV add-on for the Pa11y service. Pa11y is an automated accessibility testing tool that helps developers make their web applications more accessible.

This is optimized for Aljibe projects, but can be used in any DDEV project.

In DDEV, addons can be installed from the command line using the ddev add-on get command, for example, ddev add-on get Metadrop/ddev-pa11y.

Components of the repository

• The fundamental contents of the Pa11y addon. For example, in this template there is a docker-compose.pa11y.yaml file.
• An install.yaml file that describes how to install the Pa11y service.
• A test suite in test.bats that makes sure the Pa11y service continues to work as expected.
• Github actions setup so that the tests run automatically when you push to the repository.

Getting started

1. Install the Pa11y service in your DDEV project.

   For DDEV v1.23.5 or above run

   ddev add-on get Metadrop/ddev-pa11y

   For earlier versions of DDEV run

   ddev get Metadrop/ddev-pa11y

2. Start the DDEV project with ddev start or ddev restartif already started.

3. Run the Pa11y service with ddev pa11y http://metadrop.net --reporter=junit --standard WCAG2A.

Using a Config File

The Pa11y configuration can be customized config files (json). For example, you can edit the provided file under tests/pa11y/config.json with the following content:

{
  "chromeLaunchConfig": {
    "args": ["--no-sandbox"],
    "ignoreHTTPSErrors": true
  },
  "hideElements": ".skip-pa11y",
  "ignore": [
    "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
  ],
}

To use this config file, you can run the Pa11y service with the following command:

ddev pa11y http://example.com --config=config/config.json

NOTE: The default config.json file and URL are picked by default

Short command	Equals to
ddev pa11y	ddev pa11y https://web --config=config/config.json
ddev pa11y https://example.com	ddev pa11y https://example.com --config=config/config.json

Advanced Config file Customizations

Several options available in the pa11y command can be configured in the config file, like:

• screenCapture
• reporter
• runner

Simply add them in your config.json:

{
  "chromeLaunchConfig": {
    "args": ["--no-sandbox"],
    "ignoreHTTPSErrors": true
  },
  "hideElements": ".skip-pa11y",
  "ignore": [
    "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
  ],
  "screenCapture": "config/pa11y.png",
  "reporter": "cli",
  "runner": ["axe", "htmlcs"]
}

Please consult pa11y documentation to discover more.

Credits

• Contributed and maintained by @Metadrop