accessible-ai-output

Accessible AI Output

The Law

AI OUTPUT IS NOT ACCESSIBLE BY DEFAULT.
Streaming text injected into the DOM is invisible to screen readers without ARIA live regions.
"We'll do accessibility later" ships content that is unusable by assistive technology now.
ARIA live regions + reading order + cognitive load review IS accessible AI output.

When to Use

Trigger before:

• Shipping any UI that streams or dynamically renders AI output
• Adding a chat interface, AI response panel, or inline suggestion
• Any component that updates its content in response to a model call
• Rendering structured AI outputs (tables, lists, code blocks generated by a model)

When NOT to Use

• Static content that does not change after initial render
• Server-side rendered pages where the full AI output is in the initial HTML

The Three Accessibility Concerns for AI Output

1 — ARIA Live Regions

Dynamically inserted content is invisible to screen readers unless an aria-live region is declared.

<!-- Streaming output — use polite: screen reader finishes current before announcing -->
<div
  role="log"
  aria-live="polite"
  aria-label="AI response"
  aria-atomic="false"
>
  <!-- Streamed tokens inserted here -->
</div>

<!-- Error messages — use assertive: interrupts current reading -->
<div role="alert" aria-live="assertive">
  Something went wrong. Try again.
</div>

<!-- Status indicators (generating, done) — polite -->
<div aria-live="polite" aria-label="Generation status">
  Generating…
</div>

Rules:

• aria-live="polite" for response content — does not interrupt what the user is reading
• aria-live="assertive" for errors only — interrupts; use sparingly
• aria-atomic="false" on streaming containers — announces each new chunk, not the entire accumulated text
• role="log" for conversational output (chat); role="status" for status messages

2 — Reading Order

Screen readers follow DOM order. Visual layout does not change DOM order.

Common failures in AI UIs:

• User message visually left, AI response visually right — but DOM has AI response before user message
• Floating action buttons (Copy, Retry) placed before the response content in DOM
• Streaming status indicator inserted at the top of the DOM but visually shown below the input