An AI Status Dashboard Must Explain What Changed

#ai #a11y #frontend #webdev

A dashboard can update in real time and still leave users asking, “What is going on?” Animated charts show motion. They do not automatically explain change, consequence, or the next action.

Give every visual update a semantic event.

type StatusEvent = {
  id: string;
  occurredAt: string;
  severity: "info" | "warning" | "critical";
  resource: string;
  summary: string;
  consequence: string;
  actionHref?: string;
};

Render a durable list next to charts:

<section aria-labelledby="updates-title">
  <h2 id="updates-title">Recent changes</h2>
  <p id="update-summary" aria-live="polite">2 new warnings</p>
  <ol aria-describedby="update-summary">
    <li>
      <time datetime="2026-07-13T02:12:00Z">10:12</time>
      Worker queue delay passed 2 minutes.
      <a href="/runs/123">Inspect affected runs</a>
    </li>
  </ol>
</section>

Update the short live-region summary, not the whole feed. Re-announcing every row on each poll overwhelms screen-reader users. New events should not steal focus or reset a keyboard user's position.

Preserve orientation

Keep filters in the URL so refresh and sharing preserve context.
Display “data through” and connection state in text.
Distinguish no incidents, no matching results, loading, disconnected, and forbidden.
Pause auto-scrolling when the user moves away from the newest event.
Offer “show 7 newer events” instead of inserting rows above focused content.
Use color as reinforcement, never the only severity signal.

If an AI writes summaries, retain the structured source event and link it. Mark generated interpretation separately from observed status. When summarization fails, show the original event rather than an empty dashboard.

Test keyboard navigation, 200% zoom, high contrast, reduced motion, slow polling, duplicate events, reconnect gaps, long resource names, localization, and a critical event arriving while a user reads history.

The public MonkeyCode repository describes long-running AI tasks and synchronized workflows. Status and task-history accessibility are relevant to that category, but this pattern is independent and is not a review of MonkeyCode's current dashboard.