Parallel DOM Architecture for Accessible Interactive Simulations
Taliesin L. Smith, Jesse Greenberg, Sam Reid, Emily B. Moore · 2018 · Proceedings of the 15th International Web for All Conference (W4A 2018) · doi:10.1145/3192714.3192817
Summary
This paper presents the Parallel DOM (PDOM) architecture developed by the PhET Interactive Simulations project at the University of Colorado Boulder to make their suite of 140+ free science and mathematics simulations accessible to students with visual impairments. PhET sims are used over 80 million times annually across primary to postsecondary classrooms worldwide, but their reliance on custom scene graph rendering (using Canvas, SVG, and WebGL through a framework called Scenery) makes them invisible to screen readers and inaccessible to keyboard-only users. The core problem is that Scenery’s scene graph uses a logical data structure optimised for graphics performance rather than semantic HTML, so there is no document object model for assistive technologies to interact with. The PDOM solution creates a parallel HTML representation that mirrors the scene graph: as each node in the scene graph renders visual content, a corresponding HTML structure provides semantic content that screen readers can access. The PDOM is structured into five consistent sections across all sims: (1) the sim’s title, (2) a Scene Summary describing onscreen objects, (3) the Play Area with subheadings and descriptions of primary interactive objects, (4) the Control Panel with all options and controls, and (5) Sim Resources and Tools. The paper uses the "Balloons and Static Electricity" simulation as its primary example, where students explore charge transfer, induced charge, and electrostatic attraction by rubbing a virtual balloon on a sweater.
Key findings
The PDOM approach solves several problems that existing accessibility techniques could not address individually. Canvas and WebGL lack semantic structure entirely; SVG’s accessibility elements (<title>, <desc>) are not widely supported by browsers; Shadow DOM requires HTML elements as starting points and works only in Chrome; and global use of ARIA’s application role disables standard screen reader navigation modes. The PDOM leverages native HTML semantics (headings, buttons, checkboxes, radio buttons) combined with targeted WAI-ARIA for custom elements, providing keyboard accessibility out of the box and compatibility with screen reader navigation modes (by region, heading, or interactive element). For interactions with no HTML equivalent — such as dragging a balloon around the screen — the team created custom elements using ARIA’s application role locally: a "Grab Yellow Balloon" button launches an application-role state where W/A/S/D or arrow keys move the balloon. Dynamic descriptions update as the simulation state changes, using parameterised text strings (e.g., "several" replaced with "no," "a few," or "many" based on charge count). A custom utterance queue manages the high volume of ARIA live region alerts during interaction, routing all alerts through a single polite live region to ensure consistent delivery across browsers. An "a11y view" renders the PDOM content visually alongside the sim to support the description design process. Scenery provides a high-level API so developers define accessible content per scene graph node without writing HTML markup, and common components implemented in shared libraries become accessible across all sims simultaneously.
Relevance
This paper addresses a critical gap in STEM education accessibility: highly interactive, visually-driven learning tools that are inaccessible to students with disabilities. The PDOM architecture is significant because it demonstrates that complex interactive web applications rendered entirely through Canvas/WebGL/SVG can be made fully accessible without abandoning the graphics framework — a challenge faced by many web applications beyond PhET (games, data visualisations, design tools). The architectural insight of maintaining a parallel semantic representation synchronised with the visual scene graph is a reusable pattern. For accessibility practitioners, the specific design decisions are instructive: using native HTML elements wherever possible (buttons, checkboxes) rather than ARIA roles; confining the application role to specific custom interactions rather than applying it globally; structuring content into consistent navigable regions; using parameterised dynamic descriptions that update with simulation state; and routing alerts through a managed utterance queue to handle the high frequency of state changes in interactive applications. The open-source nature of PhET and the Scenery framework means other developers of interactive educational content can adopt this approach directly.
Tags: web accessibility · interactive simulations · screen readers · keyboard accessibility · WAI-ARIA · STEM accessibility · visual impairment · PhET · DOM · scene graph · alternative input
Standards referenced: WAI-ARIA · WCAG