Accessibility

The chart and the components work without a mouse, without color and without sight of the canvas. You don't need to configure anything for this.

The chart

Role: the canvas is a focusable image (role="img"). Its description lists every visible agent's status, rate and health, for example "Coder: Active, 14.2 tokens per second, health 91." It updates as the data does.
Name: ariaLabel sets the accessible name; by default it describes the roster.
Language: the chart is laid out left to right in every locale, since time runs left to right. Agent names in any script, including Arabic and Hebrew, render correctly.

Keyboard

Focus the chart with Tab, then:

Key	Action
`←` `→`	Step to the previous or next sample.
`↑` `↓`	Switch to the previous or next agent.
`Home` `End`	Jump to the first or last sample.
`Enter`	Activate the sample (fires `onPointClick`).
`Esc`	Clear the selection.
`Space`	Pause or resume the view. Data keeps buffering while paused.

The inspected sample shows the same tooltip as hover: its age, rate, progress and the status it had then. Agents with no line yet (unknown progress) are skipped. The canvas lists these keys in aria-keyshortcuts.

Controls

Legend chips and Pause are toggle buttons with aria-pressed, visible focus rings, and 24 px targets inside 40 px hit areas.
The "+N" overflow menu is a button with aria-expanded. Esc closes it and returns focus to the button.

Announcements

With anomalyDetection on, the chart announces each anomaly when it starts, escalates and ends — once, not every time its numbers change. Warnings go to a polite live region (role="status"), critical anomalies to an alert region (role="alert").

The components

AnomalyBanner announces the same way, through status and alert regions that are always present.
AgentRoster is a table with a caption (caption, default "Agents"). When it's too narrow it scrolls inside a focusable region, so keyboard users can scroll it.
AgentTimeline draws the bar for sighted users and gives screen readers a list instead: "Thinking for 12s", "Waiting for 40s", and so on. Statuses differ by fill pattern as well as color.
AgentStatusBadge states the status in words, with an icon.

Color and contrast

All text clears WCAG AA (4.5:1) in both themes, and every palette color is at least 3:1 against both backgrounds.
Nothing relies on color alone: statuses have words and icons, and severities have marker shapes (▲ warning, ◆ critical) and labels.
An agent color you set yourself is used as given; check it against your background. See Theming.

Motion

With prefers-reduced-motion: reduce, the live dot stops pulsing, values snap to new data instead of easing, and controls don't scale when pressed. Motion is never the only cue: every state change also shows as text or a shape.