Code Examples

Programmatic Audits

Run the same audit as AccessKit DevTools from your own code without rendering the floating panel.

1 min read

runAccessibilityAudit returns a promise that resolves to an array of AccessKitAuditFinding. It uses the same default WCAG rule tags as DevTools (2.0 / 2.1 / 2.2 levels A, AA, and AAA) and accepts the same optional additionalTags as AccessKitDevToolsadditionalRules.

Browser Only:

The audit runs against a real Document. In Node, window must exist; use a browser, Playwright’s page context, or a DOM environment such as Vitest’s jsdom (see below). Plain Node without a DOM will not run rules.

Basic usage

tsx
import {
  runAccessibilityAudit,
  formatAuditFindingsForConsole,
} from "@access-kit/react"

// In a browser context (e.g. after navigation in Playwright):
const findings = await runAccessibilityAudit(document, {
  additionalTags: ["best-practice", "cat.forms"],
  logToConsole: true,
})

console.log(formatAuditFindingsForConsole(findings))

Tests with Vitest + jsdom

Point Vitest at the jsdom environment so document exists. This is ideal for component-level smoke checks; for full-page visual and contrast behavior, prefer Playwright or the CI script in Auditing in CI.

tsx
import { describe, it, expect } from "vitest"
import { runAccessibilityAudit } from "@access-kit/react"

describe("MyPage", () => {
  it("has no blocking WCAG errors in default rules", async () => {
    document.body.innerHTML = `
      <main><h1>Hello</h1><button>OK</button></main>
    `
    const findings = await runAccessibilityAudit(document)
    const errors = findings.filter((f) => f.severity === "error")
    expect(errors).toEqual([])
  })
})

Run with

bash
vitest run --environment jsdom

Options

  • additionalTags: Same values as DevTools (e.g. "best-practice", "section508", "cat.color").
  • logToConsole: When true, prints a formatted summary via formatAuditFindingsForConsole.

See also