Real A11yAccessibility tooling that works in the real world

Beta (v0.1) — Extracts the accessibility tree as plain data. Use it through a Chrome extension, Storybook panel, React component, testing library, CLI, or MCP server — one engine, every surface.

Get Started

Chrome Extension

🌳

One engine, every context

The full semantic tree as plain data — roles, accessible names, focus state, modal context, live regions. Every package is a different lens on the same tree.

🧩

Chrome extension

Open the side panel on any website and explore its DOM, A11y, and TAB views live. Highlights elements on the page as you navigate the tree. No code, no setup.

Install the extension

🧪

Test what users actually experience

@real-a11y-dev/testing gives you treeSnapshot(), assertHeadingOrder(), assertNoUnlabeledInteractive(), and a fluent flow() chain — all powered by the real accessibility tree, not synthetic mocks.

⌨️

Audit from the shell and CI

@real-a11y-dev/cli — the real-a11y command audits any URL from the shell with per-instance locators and CI-grade exit codes. snapshot + diff then track accessibility regressions across a PR, findings-aware.

Explore the CLI

🤖

Accessibility for AI agents

@real-a11y-dev/mcp — a Model Context Protocol server that hands the semantic tree and audits to AI agents over stdio. Point any MCP client at it and the agent can reason about what assistive tech actually perceives.

Explore the MCP server

⚛️

First-class React support

useSemanticTree() and useActiveModal() subscribe to DOM mutations via useSyncExternalStore — concurrent-mode safe, no boilerplate. Drop in and the tree panel appears.

📖

Storybook panel out of the box

Install @real-a11y-dev/storybook-addon and every story gets an A11y tree panel showing the semantic structure, heading outline, and tab sequence — updated live while the panel is open.

🔒

Shadow DOM isolation by default

The semantic-navigator embed mounts inside a ShadowRoot so its styles never leak into your app and your app's styles never override the panel. CSS conflicts are eliminated at the architecture level.