https://github.com/nfreear/accessibility-devops
Demonstration of integrating automated accessibility testing tools into a continuous integration/deployment (CI/CD) workflow.
https://github.com/nfreear/accessibility-devops
accessibility ci ci-cd cypress cypress-a11y cypress-axe devops pa11y-ci
Last synced: 11 days ago
JSON representation
Demonstration of integrating automated accessibility testing tools into a continuous integration/deployment (CI/CD) workflow.
- Host: GitHub
- URL: https://github.com/nfreear/accessibility-devops
- Owner: nfreear
- Created: 2024-07-30T19:37:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-29T19:02:33.000Z (over 1 year ago)
- Last Synced: 2025-03-01T19:22:34.443Z (over 1 year ago)
- Topics: accessibility, ci, ci-cd, cypress, cypress-a11y, cypress-axe, devops, pa11y-ci
- Language: JavaScript
- Homepage:
- Size: 569 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Accessibility DevOps demo
[![Node.js CI][ci-img]][ci] (_expected to fail!_)
[![Should fail][ci-fail-img]][ci-fail]
This repository demonstrates integrating automated accessibility testing tools into a [continuous integration/deployment (CI/CD)][intro] workflow.
* [@nfreear/accessibility-ci-demo][demo1]
* [@nfreear/accessibility-devops][demo2] (_this repo._)
It demonstrates the use of two separate tools:
* [pa11y-ci][],
* [cypress-axe][] with [Cypress][] (see this [blog post][]).
The repo contains example _fails_ and _passes_ [pages](./pages), and corresponding [end-to-end tests](./cypress/e2e).
## ⚠️✋ This project does not guarantee that what you build is accessible.
The GDS Accessibility team found that only [~30% of issues are found by automated testing][gds].
You'll also need to:
* test your interface with the [assistive technologies that real users use][at] (see also [WebAIM's survey results][survey]).
* include disabled people in user research.
## Usage
```
npm install
npm run lint
npm run start:detached
npm run test:cypress
npm run test:pa11y-ci
_SPEC=pass npm run test:cypress
```
[gds]: https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage
[at]: https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies#when-to-test
[survey]: https://webaim.org/projects/screenreadersurvey10/#primary
"Screen Reader Survey #10, 2024."
[pa11y-ci]: https://github.com/pa11y/pa11y-ci
[cypress]: https://www.cypress.io/
[cypress-accessibility]: https://docs.cypress.io/accessibility/get-started/introduction
[cypress-axe]: https://www.npmjs.com/package/cypress-axe
[blog post]: https://opensource.com/article/23/2/automated-accessibility-testing
"Blog: example of performing accessibility tests in GitLab with Pa11y and Cypress, By Daniel Mundra, February 22, 2023"
[civic-repo]: https://gitlab.com/civicactions/accessibility
[wp-ci]: https://en.wikipedia.org/wiki/Continuous_integration
[wp-ops]: https://en.wikipedia.org/wiki/DevOps
[intro]: https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/introduction-to-ci.md
"Introduction to Continuous Integration (Google)"
[demo1]: https://github.com/nfreear/accessibility-ci-demo
"#1 Demos use of 'jest-axe' and 'lighthouse-ci-action'"
[demo2]: https://github.com/nfreear/accessibility-devops
"#2 Demos use of 'pa11y-ci' and Cypress"
[ci]: https://github.com/nfreear/accessibility-devops/actions/workflows/node.js.yml
[ci-img]: https://github.com/nfreear/accessibility-devops/actions/workflows/node.js.yml/badge.svg
[ci-fail]: https://github.com/nfreear/accessibility-devops/actions/workflows/fail.yml
[ci-fail-img]: https://github.com/nfreear/accessibility-devops/actions/workflows/fail.yml/badge.svg