generative-a11y

Accessibility for AI interfaces

Accessible AI,without rebuilding your interface.

Give screen-reader users useful updates as responses stream, tools run, and decisions need attention.

npm install @generative-a11y/
Read the setup guide Try live examples
Runtime trace
Ready

Existing application UI

Your assistant response will stream here while the library leaves this interface unchanged.

Screen-reader updates

  1. Press Play to begin

Latest resultPress Play to run the visual trace

This trace shows each update core prepares. Test with a real screen reader to confirm what it speaks.

How it works

From app event to screen-reader update.

  1. 01AI framework
  2. 02standard events
  3. 03announcement rules
  4. 04browser update
  5. 05screen reader

An adapter reports a response, tool, approval, or error. Core chooses the text and timing. DOM adds the update to the page.

Designed for asynchronous AI

Useful updates for streams, tools, and decisions.

01

Streaming responses

Group partial output into meaningful updates instead of sending every token or the growing transcript to a live region.

Screen readers and streaming AI
02

Agents and tool calls

Prioritize confirmed tool progress, approval requests, interruptions, failures, retries, and connection changes.

Accessible AI agents
03

Framework integrations

Connect documented lifecycle state from React, the Vercel AI SDK, assistant-ui, or AG-UI without replacing the host UI.

AI SDKassistant-uiAG-UI

The accessibility layer

How does generative-a11y make streaming AI accessible?

Streaming AI interfaces can change faster than a screen reader can present useful information. Sending each token to an ARIA live region creates repeated fragments, while replacing the full answer can make assistive technology announce growing text more than once. Agents add tool progress, approval requests, connection changes, failures, and retries that compete with response text.

generative-a11y accepts confirmed lifecycle events from your app, groups response text into meaningful units, prioritizes status updates, removes duplicates, and sends bounded announcement intents to the DOM package. The browser layer updates live regions without moving focus during normal streaming or tool activity. Your visual interface, semantic HTML, keyboard behavior, and application state remain under your control. Read the ARIA live region guide or review the accessibility model.

Quick start

Connect the runtime in a few lines.

Install core and DOM, create one runtime, and dispatch the events from your existing response and tool callbacks.

Read Getting Started
TypeScriptframework-neutral
import { createGenerativeA11y } from "@generative-a11y/core";
import { connectRuntimeToDOM } from "@generative-a11y/dom";

const runtime = createGenerativeA11y({});
const delivery = connectRuntimeToDOM(runtime);

runtime.dispatch({
  type: "response.started",
  responseId: "response-1",
});

Packages: core, dom, react, ag-ui, ai-sdk, assistant-ui.

Built for: streaming, tools, approvals, retries, and clear status updates.

Browser matrix: Chromium, Firefox, and WebKit.

Development: redacted trace explorer and deterministic replay tests.

License: MIT.