Gate on Accessibility with axe-core
Run axe-core in CI so a PR that introduces a WCAG violation is blocked before merge, not found in a yearly audit.
Task
Add npx @axe-core/cli http://localhost:3000 --tags wcag2aa to the test suite so regressions are caught automatically on every pull request.
When to use this
A refactor passes existing tests but breaks npx @axe-core/cli http://localhost:3000 --tags wcag2aa, shipping a silent regression to users.
Prerequisites
- A test runner configured (Vitest or Jest)
- Source code with testable units
Steps
1. Configure npx @axe-core/cli http://localhost:3000 --tags wcag2aa in the project configuration file with the recommended defaults.
npx @axe-core/cli http://localhost:3000 --tags wcag2aa
Expected output: The configuration is accepted and npx @axe-core/cli http://localhost:3000 --tags wcag2aa runs without errors on the first invocation.
2. Run the check locally to verify npx @axe-core/cli http://localhost:3000 --tags wcag2aa produces the expected result before pushing.
pnpm test
Expected output: Local run matches CI behavior; no surprises after push.
3. Add the gate to the CI pipeline so npx @axe-core/cli http://localhost:3000 --tags wcag2aa blocks merge on failure.
- name: Run add accessibility axe gate
run: pnpm test
Expected output: Pull requests with failing npx @axe-core/cli http://localhost:3000 --tags wcag2aa are blocked from merging.
Troubleshooting
Problem
The check passes locally but fails in CI
Solution
Pin dependency versions and the runtime to match CI exactly; reproduce with the same Docker image or act.
Problem
Configuration is rejected with a schema error
Solution
Check the tool version matches the config schema; older versions may not support newer fields.
Limitations
- The gate only runs on events that trigger the workflow; locally pushed commits bypass it.
- Configuration drift is possible if someone edits settings outside version control.
Cover the regression path
Start by measuring the problem. Run axe-core in CI so a PR that introduces a WCAG violation is blocked before merge, not found in a yearly audit. The most common mistake is adding the gate without first confirming it catches the issue you care about. Run npx @axe-core/cli http://localhost:3000 –tags wcag2aa against the current codebase and inspect the output before wiring it into CI.
npx @axe-core/cli http://localhost:3000 --tags wcag2aaKeep tests maintainable
Once the gate is in place, make failures actionable. A failing npx @axe-core/cli http://localhost:3000 –tags wcag2aa should point to the exact file and line, not a generic error. Pin the tool version in the lockfile so a upstream release does not silently change behavior. Review the gate output in every pull request just like a test result.