accessible-ai-outputlisted

# 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. ```html <!-- 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 s