Why We Did This Now
Several teachers wrote to us asking whether any of the simulations could be used in classes with visually impaired students. The honest answer was: we didn't know. That was embarrassing enough to motivate an audit. We used Lighthouse, axe DevTools, and manual keyboard-only walkthroughs across every page on the site.
Summary Scores (Before)
What We Found
tabindex="0" to the canvas wrapper plus an
Escape key listener that blurs the canvas and returns focus to the
page.
<label> on all control inputs
<input type="range"> sliders with no associated
label — only visual text nearby. Screen readers announced "slider"
with no context.
<label>, or added
aria-label and
aria-describedby attributes where the label needed to
be separate.
--color-muted-2 token (#7a88a0) on the dark
background (#060d1a) produced a contrast ratio of 3.4:1 — below
the WCAG AA requirement of 4.5:1 for normal text.
--color-muted-2 to #8fa5c0 (4.6:1).
Also updated --color-muted similarly.
role="img" and aria-label to
each canvas with a meaningful description of what the simulation
shows, plus a link to a text-based explanation.
outline: none reset removed the browser
focus ring on all interactive elements. Keyboard users had no
visual indication of where focus was.
:focus-visible rule using a 2px amber offset outline
on all interactive elements.
The Hardest Problem: Moving Simulations
The hardest accessibility challenge with WebGL simulations is not technical — it's conceptual. A screen reader user can't meaningfully experience a flocking simulation or a pendulum. The canvas is a bitmap; there's nothing to narrate.
Our approach was to separate the interactivity from the experience:
- All simulation parameters (speed, mass, damping) are exposed as real HTML inputs reachable by keyboard
-
Key numeric outputs (energy, particle count, collision rate) are in
live regions (
aria-live="polite") so screen readers announce changes - Each simulation now has a text summary that describes what it shows, what the user can change, and what to observe
This doesn't make our simulations fully accessible to users with visual impairments — that would require a completely different interaction model. But it makes the surrounding context and controls fully accessible, which is a meaningful improvement.
What's Still Outstanding
-
Reduced motion support — some simulations should pause or show a
static frame when
prefers-reduced-motionis set - High contrast mode — our custom dark theme conflicts with Windows High Contrast Mode
- Full keyboard control of simulation parameters without a mouse (work in progress)