mcpField
A
accessibility-diff

accessibility-diff

github.com/accesslintTesting & quality114968 installsUpdated 9w ago
Repository

About accessibility-diff

accessibility-diff compares accessibility audit results across versions for developers assessing code changes. It reports new, fixed, and pre-existing findings with evidence and locations, without editing code.

Key features

  1. 01Compare audit results across versions
  2. 02Report new, fixed, and existing findings
  3. 03Include finding locations and evidence
  4. 04Compare working changes or branches

Use cases

  1. 01Check uncommitted changes for accessibility regressions
  2. 02Compare a branch with the default branch
  3. 03Locate new findings for follow-up fixes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/accesslint/skills --skill accessibility-diff

After installing, type/accessibility-diffin Claude Code to confirm it loaded.

Details

From the project README

Default branch: !git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main

Report only what changed. Locate; don't fix.

Shared grounding and honesty conventions: ../shared/methodology.md.

Parse $ARGUMENTS: if --branch <name> is present, remove it and use branch mode (no value means the default branch above). The rest is the target: a URL, a config target name, or empty for the default target from accesslint.config.json. If it's empty and there's no config, ask for a URL.

1. Audit

PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')

Stash mode (default; uncommitted changes). Tell the user first: "Running in diff mode — stashing your changes to capture a baseline, then restoring. Your working tree will be fully restored." If git stash push fails, warn and exit.

git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json

Branch mode (--branch <name>). Tell the user first: "Diffing against <name> — checking out that branch to capture a baseline, then restoring. Your working tree will be fully restored." Branch switching triggers a rebuild but not a browser reload, so the CLI opens a fresh tab each run to read the current build. Use --wait-for "<selector>" to hold the audit until the rebuild is ready; without it, warn that a slow build may give a stale baseline.

git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
git checkout <branch>
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git checkout - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]

Pass --selector and --include-aaa to both runs.

2. Report

Accessibility diff — http://localhost:3000/ vs main (94 rules, live DOM)
2 new · 1 fixed · 4 pre-existing hidden

New — Critical
- color-contrast — 2.1:1 (needs 4.5:1), #bbb on #fff
    where: main > p.subtitle   fix: darken to #767676
Fixed
- img-alt — <img src="old.jpg"> (no longer present)

For each new violation: where (selector verbatim, plus file:line (symbol) if source is present; don't fabricate), evidence, and fix (mechanical change or NEEDS HUMAN).

Don't edit. For fixes, apply the mechanical ones and re-run accesslint:accessibility-diff to verify; for bulk work hand off to accesslint:accessibility-fix.

3. Tear down

npx -y @accesslint/chrome@latest stop --all  # skip if ensure reported "managed":false

Notes

  • ensure determines the port; don't hardcode 9222.
  • CLI exit 2 means a bad URL or target, or the page never loaded; check the dev server.
  • A target name resolves the same in both runs only if accesslint.config.json is unchanged across the stash or checkout. If your changes touch the config, pass an explicit URL.
  • Stash mode: sleep 2 covers most HMR cases; if the baseline looks identical to current, add --wait-for "<selector>".
  • Branch mode: no HMR; the CLI opens a fresh tab each run, and --wait-for is the rebuild gate.
  • Large DOM changes between runs cause selector drift; re-run accesslint:accessibility-scan for the full picture.

Comments

Markdown supported