Testland
Browse all skills & agents

pa11y-a11y

Authors and runs pa11y accessibility scans - a CLI / Node.js tool that wraps HTML CodeSniffer (htmlcs) and / or axe-core engines - with `pa11y {url}` invocation, reporter selection (cli / csv / json / html / tsv), WCAG standard selection (WCAG2A / WCAG2AA / WCAG2AAA), and rule ignoring. Use when the project needs scriptable a11y scans without a full test framework, or when a Node-stack project wants an alternative to direct axe-core use.

Install with skills.sh (any agent)

npx skills add testland/qa --skill pa11y-a11y
View source

pa11y-a11y

Overview

pa11y is "your automated accessibility testing pal" - a Node.js CLI that runs a11y tests on a page either via the command line or programmatic API (pa11y (opens in new window)). It can use HTML CodeSniffer (htmlcs, default) or axe-core as the underlying engine.

When to use

  • A non-test-framework workflow needs scriptable a11y scans (CI cron job; documentation publication; static-site CI).
  • The team wants a single command (pa11y <url>) rather than framework-integrated tests.
  • Multiple URLs need to be batched (pa11y-ci is the matching multi-URL runner).

If the project already runs Playwright / Cypress with axe-core, prefer axe-a11y - pa11y adds a layer.

How to use

  1. Install pa11y (or pa11y-ci for a URL set) as a dev dependency.
  2. Pick the conformance target with --standard (default WCAG2AA) and add --runner axe alongside htmlcs for WCAG 2.2 coverage.
  3. For one page run pa11y <url>; for a URL set list them in .pa11yci and run pa11y-ci.
  4. Choose --reporter json and redirect to a file so CI can parse and archive it.
  5. Set --threshold (0 for green-field, higher while burning down debt) so the exit code gates the build.
  6. Add narrow --ignore entries for documented false positives, each justified in the config.
  7. Pipe the JSON through a11y-violation-gate to dedupe cross-engine findings and ratchet against a baseline.
  8. Verify: run pa11y-ci locally and confirm it exits zero (no URL over threshold) before merging; if it exits non-zero, fix the reported violations (or add a justified --ignore for a confirmed false positive) and re-run until green.

Install

npm install -g pa11y

(Per pa11y (opens in new window); or --save-dev for per-project.)

Running

Single URL

pa11y https://example.com

(Per pa11y (opens in new window).)

Key flags

Common flags: --reporter <name> (cli / csv / json / html / tsv), --standard <name> (WCAG2A / WCAG2AA / WCAG2AAA), --runner <name> (htmlcs or axe), --include-warnings, --include-notices, --ignore <rules>, --threshold <n>, --timeout <ms>, and --config <file>. Full table with effects: references/flags-and-output.md.

Multi-URL with pa11y-ci

For batching across many URLs:

npm install -g pa11y-ci

Configure .pa11yci:

{
  "defaults": {
    "standard": "WCAG2AA",
    "runners": ["axe", "htmlcs"],
    "includeWarnings": true,
    "threshold": 0
  },
  "urls": [
    "https://staging.example.com/",
    "https://staging.example.com/dashboard",
    "https://staging.example.com/checkout"
  ]
}

Run:

pa11y-ci

pa11y-ci exits non-zero if any URL exceeds threshold - the canonical CI gate signal.

Programmatic API

const pa11y = require('pa11y');

const results = await pa11y('https://example.com', {
  standard: 'WCAG2AA',
  runners: ['axe', 'htmlcs'],
  includeWarnings: true,
});

console.log(results.issues);

results.issues is an array of issue objects with code, type (error/warning/notice), selector, context, message.

Results structure

results.issues[] holds one object per finding with code, type (error / warning / notice), selector, context, message, and runner. When both engines run, the same defect appears twice under different codes - WCAG-SC-coded from htmlcs, rule-coded from axe - and a11y-violation-gate collapses the pair via its fingerprint field. Full JSON shape and a dual-engine example: references/flags-and-output.md.

Worked example

Scan the staging checkout with both engines and capture JSON:

pa11y --standard WCAG2AA \
      --runner htmlcs --runner axe \
      --include-warnings \
      --reporter json \
      --threshold 0 \
      https://staging.example.com/checkout > pa11y-results.json

--runner htmlcs --runner axe runs both engines and merges the issue list - broader coverage at the cost of duplicate findings.

The run exits non-zero (threshold 0 exceeded) and pa11y-results.json holds an issues[] array. Cross-engine duplicates (see Results structure) collapse to one record when piped through a11y-violation-gate.

CI integration

# .github/workflows/pa11y.yml
name: pa11y

on:
  pull_request:
  push:
    branches: [main]

jobs:
  pa11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: npm install -g pa11y-ci

      - name: Run pa11y-ci
        run: pa11y-ci

      - name: Upload report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: pa11y-report
          path: |
            pa11y-results.json
            .pa11yci
          retention-days: 14

Anti-patterns

Anti-patternWhy it failsFix
Default standard WCAG2AA without WCAG 2.2 specificspa11y's WCAG2AA standard is 2.0/2.1; WCAG 2.2 SCs (2.4.11, etc.) need axe-runner.Always include --runner axe for 2.2 coverage.
Threshold 0 on a project with debtEvery PR fails until the entire backlog is fixed.Use a11y-violation-gate for ratchet OR raise threshold incrementally.
Running only htmlcsDifferent rule coverage than axe; misses some issues.Run both runners; deduplicate at the gate.
Ignoring rules without code commentsLost institutional knowledge.Inline justification + quarterly review of ignore lists.

Limitations

  • Selector reliability. htmlcs sometimes produces selectors that don't uniquely identify the failing element; axe is more precise.
  • JS-rendered content. pa11y's default Chromium runner waits for load event; SPAs may need --wait-for-selector to delay scanning until the app is ready.
  • No native test-framework integration. For Playwright / Cypress, prefer axe-a11y.

References

  • pa11y (opens in new window) - main repo: install, CLI flags, runners, reporter formats.
  • references/flags-and-output.md - full CLI flag table and the issue JSON shape.
  • pa11y-ci - https://github.com/pa11y/pa11y-ci (multi-URL).
  • HTML CodeSniffer (the htmlcs runner) - https://github.com/squizlabs/HTML_CodeSniffer
  • axe-a11y - direct axe usage (pa11y's alternative engine).
  • a11y-violation-gate - CI gate consuming pa11y / axe results.

pa11y CLI flags and output structure

View source (opens in new window)

pa11y CLI flags and output structure

Key flags

FlagEffect
--reporter <name>Output format: cli (default), csv, json, html, tsv.
--standard <name>WCAG standard: WCAG2A, WCAG2AA (default), WCAG2AAA.
--include-warningsInclude warning-level issues (excluded by default).
--include-noticesInclude notice-level issues.
--ignore <rules>Skip specific rules (comma-separated).
--runner <name>Choose engine: htmlcs (default) or axe.
--threshold <n>Allow up to N issues before failing.
--timeout <ms>Page-load timeout.
--config <file>Use a .pa11yrc config file.

Results structure

{
  "documentTitle": "Example",
  "pageUrl": "https://example.com/",
  "issues": [
    {
      "code": "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
      "type": "error",
      "typeCode": 1,
      "message": "This element has insufficient contrast at this conformance level.",
      "context": "<button>Submit</button>",
      "selector": "button.primary",
      "runner": "htmlcs"
    },
    {
      "code": "color-contrast",
      "type": "error",
      "typeCode": 1,
      "message": "Elements must meet minimum color contrast ratio thresholds",
      "context": "<button>Submit</button>",
      "selector": "button.primary",
      "runner": "axe"
    }
  ]
}

Note the same issue from two engines - htmlcs flags as WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail (WCAG-SC-coded); axe flags as color-contrast (rule-coded). Pipe through a11y-violation-gate to deduplicate via the unified-record fingerprint field.

Related skills

a11y-violation-gate

Builds a CI gate that fails the build on **new** WCAG / a11y violations introduced by a PR while grandfathering pre-existing violations on a per-rule / per-page baseline. Aggregates verdicts from axe-core / pa11y / Lighthouse a11y / WAVE / IBM Equal Access scans. Use when a project has accumulated a11y debt and a strict "zero violations" gate would block every PR - the ratchet pattern lets the team ship while preventing regressions.

aria-authoring-patterns

Reference for the W3C ARIA Authoring Practices Guide (APG) - covers the 31 canonical interactive-widget patterns (Combobox, Dialog, Menu, Tabs, Tree, etc.), their required ARIA roles and states, the keyboard-interaction model per pattern, and the canonical-violations to watch for. Use when authoring a custom interactive widget that doesn't have a native HTML equivalent, or when reviewing one for ARIA correctness.

axe-a11y

Authors and runs axe-core accessibility scans - the most-deployed open-source a11y engine - via the `axe.run()` JavaScript API or the @axe-core/playwright / @axe-core/cli wrappers, parses the `violations[]` results into per-rule severity (critical / serious / moderate / minor), configures rule disable / disable-by-tag patterns, and emits JUnit-shaped output for CI gating. Use when the project ships UI tests in JavaScript / TypeScript and wants automated a11y coverage on every PR.

ibm-equal-access-a11y

Authors and runs IBM Equal Access accessibility-checker scans - IBM's open-source a11y engine with WCAG 2.0 / 2.1 / 2.2 + US Section 508 rule sets, integrating with Node / Selenium / Puppeteer / Playwright / Karma / Cypress test runners. Distinguished by IBM's enterprise-tier rule coverage and Section 508 specificity. Use when the project ships to US federal / public-sector customers (Section 508 mandate) or when the team values IBM-branded a11y reporting.

lighthouse-a11y

Configures Lighthouse CI's Accessibility category for automated accessibility testing (a11y / WCAG coverage) - `categories:accessibility` audits backed by axe-core (axe) - with per-URL minimum-score assertions (fail a build when a page's score drops below a threshold) and per-audit overrides, distinct from the Performance category that `lighthouse-perf` covers. Use when the project already runs Lighthouse CI for Web Vitals and the team wants to add accessibility coverage in the same pipeline rather than spinning up a separate scanner.

screen-reader-test-author

Builds a screen-reader test narrative - a step-by-step manual test script for NVDA (Windows), JAWS (Windows), VoiceOver (macOS / iOS), or TalkBack (Android) - that exercises a specific user flow through a component or page and captures the expected announcement at each step. Use when authoring an accessibility-acceptance test the team will run before sign-off, OR when scripting a manual a11y audit.

wave-a11y

Runs WebAIM WAVE accessibility scans via the WAVE API or the browser-extension UI - produces visual overlay of errors / alerts / structural elements directly on the page, plus categorized JSON output for CI use. Use when the team values manual-review-friendly visual feedback (the WAVE overlay) alongside automated CI scans, or when a regulatory audit requires WebAIM-branded reports.

wcag-checklist-builder

Builds a per-component WCAG 2.2 accessibility checklist from a component spec - covers focus management, color contrast, ARIA roles & states, keyboard interaction, error handling, and live-region announcements - emitting a markdown checklist or YAML test plan that pairs with screen-reader-test-author for manual verification and the violation gate for automated scans. Use during component-spec review or pre-implementation acceptance.

wcag-color-contrast

Reference for WCAG 2.2 color-contrast conformance - covers SC 1.4.3 Contrast (Minimum, AA), 1.4.6 Contrast (Enhanced, AAA), 1.4.11 Non-text Contrast (AA), and 1.4.13 Content on Hover or Focus (AA) - with the canonical contrast ratios (4.5:1 normal text, 3:1 large text and UI components), measurement formula references, and bulk design-token checking patterns. Use when designing a color palette, reviewing a component for accessibility, or auditing existing CSS for contrast violations.

wcag-compliance-reporter

Builds a per-page WCAG 2.2 compliance score report by aggregating output from one or more accessibility scanners (axe-core / pa11y / lighthouse / WAVE / IBM Equal Access), pivoting violations by Success Criterion (1.4.3 contrast, 2.4.7 focus visible, etc.), grouping by conformance level (A / AA / AAA), reporting per-page coverage gaps explicitly (the "this page wasn't scanned" failure mode), and emitting both an executive summary and a per-page drill-down. Use after a multi-page accessibility scan - pa11y-ci, axe across a sitemap, lighthouse-batch - when the team needs a shareable conformance report rather than a per-page tool dump.

wcag-focus-trap

Reference for **intentional** focus management in modal / dialog / drawer / popover components - the canonical pattern that satisfies WCAG SC 2.4.3 (Focus Order) without violating SC 2.1.2 (No Keyboard Trap). Covers focus-on-open, focus-cycle-within-container, Escape-closes-and-restores, return-to-trigger, and inert-the-rest-of-the-page. Use when authoring or reviewing any component that displays content over the page (modals, drawers, popovers, command palettes).

wcag-keyboard-navigation

Reference catalog for WCAG 2.2 keyboard-navigation conformance - covers SC 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap), 2.1.4 (Character Key Shortcuts), 2.4.3 (Focus Order), 2.4.7 (Focus Visible), 2.4.11/2.4.12 (Focus Not Obscured) - with conformance levels (A/AA), test scripts, and per-criterion failure patterns. Use when authoring or reviewing keyboard-only interaction support.

widget-a11y-test-matrix

Per-widget manual accessibility test matrices where every row pairs one keystroke with the expected focus behavior, the expected NVDA announcement, the expected VoiceOver announcement, and the WCAG 2.2 success criterion that row verifies. Covers button, toggle button, checkbox, text input, modal dialog, menu button, and combobox archetypes, plus universal Tab traversal. Use when a rendered widget has cleared automated scanning and a tester needs a fill-in pass/fail sheet to run by hand against NVDA and VoiceOver.