A voxel Tokyo synchronized to real-world time is trending today. The visual experience is delightful, but the underlying transit state should remain usable without WebGL, color, or animation.
Model the experience once:
type Train = {
id: string;
line: string;
previousStation: string;
nextStation: string;
scheduledArrival: string;
delayMinutes: number;
};
Render that state into both the map and a semantic list. Let users filter by line and station, pause animation, switch to reduced detail, and open a train’s route. The list needs real headings, buttons, and status text—not a canvas mirroring hack.
Do not announce every position update. Use a quiet live region only for user-selected events such as “next train arrives in two minutes” or a delay change. Preserve keyboard focus when data refreshes. Respect prefers-reduced-motion, but also provide an explicit pause control because preference and context differ.
Test keyboard order, 200% zoom, forced colors, screen-reader navigation, slow data, disconnected state, and a device without WebGL. Then ask users to complete the same task in both views: identify the next train and understand a delay.
The accessible fallback is not a lesser copy. It is another projection of the same trustworthy transit model.