Pa11y Sample Project

Skip to main content

A Website to Test with Pa11y

Testing One Page at a Time

These examples can be followed by installing Pa11y globally or as a dependency into a project.

  1. Run the following command from your CLI tool:

    npm run pa11y -- https://cdlib.github.io/pa11y-sample-project/without-errors1.html

    After running, Pa11y should return "no issues found".

  2. Test another page by running this command:

    npm run pa11y -- https://cdlib.github.io/pa11y-sample-project/with-errors1.html

    After running, Pa11y should return two errors.

  3. Test other pages by replacing the URLs from the command above with other URLs of example pages from this site.

Testing Multiple Pages Manually

This example requires downloading the repository for this website and running the command from the pa11y-sample-project root directory.

  1. Run the following command from your CLI tool:

    npm run test-a11y

    Pa11y should return "6/6 URLs passed" for the 5 pages in this website without errors.

    Additionally, Pa11y should generate a screen capture of the Examples Without Errors / Document Structure page at 400 pixels to the pa11y-screencaptures directory of this site's repository.

Testing Multiple Pages Automatically through GitHub

  1. Within this website's GitHub repository, the image alt attribute was removed within the page without-errors1.html and committed to a branch named feat-remove-img-alt.

    See this commit in the Remove image alt attribute pull request.

  2. GitHub reported a Accessibility Test failure with this commit.

  3. Notice the Check for pa11y-ci errors item highlighted with a red cross. This is the step in the test where pa11y-ci found the missing alt attribute error.

    When this step finds errors in the pa11y-ci test results, it stops running (exits with a status failure), which then causes the Accessibility Test in GitHub to fail.

  4. Immediately after the Accessibility Test failed, GitHub automatically sent an email to the author of the commit with the subject, Run failed: Accessibility - feat-remove-img-alt with links to GitHub highlighting the failed accessibility check.

This functionality is configured using this GitHub Actions Workflow, which automatically installs this website's repository's dependencies and runs Pa11y in a virtual environment on GitHub each time there is a code push.