Parallel DOM Architecture for
Interactive Science Simulations


PhET Interactive Simulations Project

Taliesin L. Smith & Jesse Greenberg

Co-authors: Sam Reid & Emily B. Moore

W4A TPG Web Accessibility Challenge, April 23, 2018
(Winner of Delegates Award)

Interactive Simulations

A student and teacher wearing goggles examine a blue liquid in a beaker. Art installation of Balloons and Static Electricity. A wooly sweater hangs from a coat rack and several pairs of green and yellow helium balloons are placed around the sweater. Posters with pencils are attached to wall encourage people to record their observations.
Screenshot of the PhET Sim, Molarity. Screenshot of the PhET Sim, Balloons and Static Electricity.

PhET Interactive Simulations

Several New PhET Simulations that are available in HTML5.
  • Large suite of math & science sims
  • 50 built in HTML5
  • Very popular 100 Million+ runs/year
  • Used in classrooms around the world
  • Free!

Until recently, not accessible.

Scene Graph: Scenery

  • Data structure made up of parent & child nodes
  • Nodes contain visual properties of all the sim's elements
  • Scenery draws the sim based on this scene graph information
  • Uses multiple graphics renderers, Canvas, WebGL, & SVG, for performance reasons
A simplified piece of Scenery's tree-like scene graph data structure being rendered visually as a charged yellow balloon against teh wall. The Play Area node has two child nodes, the Yellow Balloon node and the Wall node. The balloon and wall nodes each have a few child charge nodes representing pairs of positive and negative charges.

Scenery's Challenges

  • Draws everything, providing zero semantic information
  • Uses multiple graphics renderers, each of which has their own way of embedding accessibility information
  • Complicates design & implementation
  • Offers little benefit as support for these techniques, varies greatly as well
Balloons and Static Electricity simulation with empty blackbox callouts pointing to all the interactive objects within the visual sim.

Enhanced Scenery: Parallel DOM

Scenery's same tree-like data structure now being rendered visually and in semantically rich HTML, representing a small piece of the Parallel DOM.
  • Add accessibility information to the scene graph
  • Scenery now renders nodes from the scene graph in HTML (and ARIA)

Accessible mode

  • Same level as the visual mode
  • Agnostic to graphics renderer
  • Can be used for all of PhET's HTML5 sims
  • Other projects that use a scene graph may benefit from a PDOM

Benefits of PDOM

HTML & ARIA

  • Rich document & interaction semantics natively
  • Flexibility for custom interactions
  • Supports alerts to describe interactive experience
  • Keeps all accessibility features in one place
  • Reduces complexity of sim code
  • Minimizes implementation & maintenance costs

Users love it!

  • Very accessible, intuitive & engaging experience
An interview participant using a keyboard and screen reader to explore Balloons and Static Electricity.

See & Hear PDOM in Action

  • Bold focus highlights & robust interactions
  • Static descriptions for orientation & guiding (scaffolding)
  • Rich document & interaction semantics natively (non-visual scaffolding)
  • Alerts during interaction describing what is happening
  • Dynamic descriptions of changing state information available on-demand
Accessible Ohm's Law
Ohm's Law
Accessible John Travoltage
John Travoltage
Accessible Balloons and Static Electricity
BASE

Resources & Funders

Resources

Funders

The National Science Foundation; The Hewlett Foundation; University of Colorado.

Questions

Get involved

← →

/