Since this is supposed to be an educational tool, it should be accessible to all students.

• Use semantic HTML

• Make the animation speed configurable

• Add an alt to the visual representation

Use ARIA Live Regions, something like:

<div id="narration" role="region" aria-live="polite">
  Car #123: Crossing the intersection
</div>

The animation "scene" is the most offending part because it is defined in absolute size units (pixels):

Either change the size unites or maybe just use SVG (#1)

Instead of drawing with HTML and CSS (display: flex and order: <calculatedPosition>), use SVG and set 'calculatedPosition' manually using CSS translate(x, y)

• Recreate the 'scene' with SVG

  • Basic layout: images/scene.svg
  • Dynamic elements (the first comment shows a possible approach)
  • Add transform: translate animations (see the broken code below)

• CSS: Use only cheaply animated props, like opacity and transform translate

• CSS: Use cubic-bezier easing to create more natural car movements

  • Try https://cubic-bezier.com/

$elem.style.setProperty("--position", index + 1);

[data-state] {
  transform: translate(calc(var(--position) * var(--delta-x) * 1vw), 10px);
}

[data-direction="west"] {
  --delta-x: 50;
  --delta-y: 0;
}

[data-direction="south"] {
  --delta-x: 45;
  --delta-y: 0;
}

[data-state="new"] {
  opacity: 0;
}

[data-state="leave"] {
  opacity: 1;
  animation: 5s leaving infinite;
}

/*
.sim[data-state="running"] .vehicle[data-state=leave] {
  animate leaving!
}

.sim[data-state="collision"] #crash-area {
  opacity: 1;
}
*/

@keyframes leaving {
  50% {
    opacity: 1;
    transform: translate(calc(var(--delta-x) * 2vw), -40px);
  }

  100% {
    opacity: 0;
    transform: translate(calc(var(--delta-x) * 10vw), calc(var(--delta-y) * 10vw));
  }
}

As mentioned in the "Warnings" section:

The 'stop' and 'restart' functionalities are not fully implemented and so you will need to refresh the page to test different algorithms (TO BE FIXED later).
(You can still call Sim.stop() from the console and it will kinda work.)