Skip to content

Accessibility

Chat messages render a conversational thread between a user and an assistant. It follows the WAI-ARIA log role — a live region that announces new messages as they arrive — and meets WCAG 2.1 AA. An accessible chat thread announces each new message without re-reading the history, keeps its visual order and DOM reading order in sync, and distinguishes the assistant from the user by more than colour — so the conversation is clear whether the user sees it, hears it, or tabs through it.

For designers

Section titled “For designers”
  • Visual distinction: Ensure a clear visual difference — alignment and colour — between the bot and the user, so people with cognitive disabilities can follow the flow. Side alone isn’t enough; the bubble vs. open-text treatment carries the difference too. The same applies to the sparkle marking AI-generated content: it’s decorative, so never rely on it alone to convey “this is the assistant.” Source: WCAG 1.4.1 Use of Color.
  • Contrast: The user bubble’s text must keep a contrast ratio of at least 4.5:1 against the bubble surface, in both the default and contrast schemes. Source: WCAG 1.4.3 Contrast (Minimum).
  • Focus: The suggestion buttons’ focus styles must stay visible, meet contrast requirements, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
  • Typography: Message text uses a legible size (18px, Body 5) to stay readable for users with low vision, and colours come from semantic tokens so the thread adapts correctly across themes and surfaces.

For developers

Section titled “For developers”

The thread is a live region. Mark the wrapper so a screen reader announces new messages as they arrive without re-reading the whole history:

<div
  class="tng-chat-messages"
  role="log"
  aria-live="polite"
  aria-atomic="false"
></div>

Consumer responsibilities

Section titled “Consumer responsibilities”
  • aria-atomic="false": Set on the wrapper so only the newly added message is announced, not the entire conversation, every time a bubble appears.
  • Focus & reading order: Append messages in chronological order in the DOM (oldest first, newest last) so the focus and screen-reader order matches the visual order. Source: WCAG 1.3.2 Meaningful Sequence.
  • Interactive elements: Suggestions are real <button>s, so they’re reachable via Tab out of the box. If a message contains a link, make sure it’s reachable too.
  • Scroll management: When a new message arrives, don’t auto-scroll to it unless the user is already at the bottom of the thread — yanking the viewport disorients someone reading earlier history.
  • Decorative icon: Keep the sparkle aria-hidden="true"; it adds nothing for assistive tech.

Keyboard

Section titled “Keyboard”
Key Action
Tab Move to the next suggestion (or link) in the thread
Shift + Tab Move to the previous suggestion (or link)
Enter / Space Activate the focused suggestion

See the WAI-ARIA log role and live region guidance for the announcement behaviour.