Why React needs its own checker

axe-core, Pa11y, and Lighthouse all run on rendered DOM in a real browser. That means they can't see your unrendered route shells, your storybook-only variants, or the component you just authored but haven't wired up yet. They also can't rewrite source code — they only report.

A React-native checker reads JSX and TSX source directly, understands props flow, recognizes design system primitives (Radix, Headless UI, shadcn/ui), and produces edits in the original file — not screenshots of failures.

What gets scanned

fixa11y reports against every WCAG 2.1 AA criterion that is statically detectable in JSX, including:

Missing or empty accessible names on buttons and links
Non-semantic elements with click handlers (clickable divs)
Unlabeled form controls and missing field associations
Color contrast failures across Tailwind, CSS-in-JS, and inline styles
Positive tabindex values and broken focus order
Missing alt text on <img> and <Image>
Heading level jumps and missing landmarks
Invalid ARIA roles, references, and required-attribute combinations

Before / after

As authored

// Component as authored — no a11y review
export function PrimaryAction({ onClick }) {
  return (
    <div onClick={onClick} className="bg-blue-300 text-white p-2">
      <img src="/save.svg" />
    </div>
  )
}

After fixa11y ✓

// fixa11y output — WCAG 2.1 AA compliant
export function PrimaryAction({ onClick, label = 'Save changes' }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      className="bg-blue-600 text-white p-2"
    >
      <img src="/save.svg" alt="" />
    </button>
  )
}

Two surfaces, same engine

The browser fixer is for focused work — paste a component, get a fix, see the WCAG citations next to each change. The CLI scans an entire repository:

fixa11y audit ./src/components --report a11y.json
fixa11y fix ./src/components --diff
fixa11y fix ./src/components --write --yes

The JSON report is structured for ingest into Jira, ServiceNow, and enterprise governance tools used in Section 508 remediation programs.

React Accessibility Checker

Why React needs its own checker

What gets scanned

Before / after

Two surfaces, same engine

Fix this in seconds with fixa11y