Using Scenery and the Parallel DOM to support accessible web applications

Presentation Overview

PhET Interactive Simulations

Logo for PhET Interactive Simulations, PhET spelled with blue and yellow letters with a paper airplane flying through the h.

PhET Implementation Overview

Why custom render entire interface?

The View: Scenery

The View: Scenery

A diagram representing a scene graph data structure. The diagram 
      is a tree-like hierarchy. At the root of the tree is a box labelled 'Play Area'. Out of this node are two arrows: one pointing to a child node
      labelled 'Physics Book' and the other pointing to a node labelled 'Chemistry Book'. From each of these books are a number of arrows each pointing to
      child nodes labelled 'Atom'. Beneath this diagram is an arrow pointing to the rendered image, which shows a physics book and a chemistry book made of
      atoms in a play area.

The View: Scenery

Accessibility in traditional Web Graphics

Issues with these approaches

The Parallel DOM

The Parallel DOM: How it works

A diagram representing a scene graph data structure. The diagram 
      is a tree-like hierarchy. At the root of the tree is a box labelled 'Play Area'. Out of this node are two arrows: one pointing to a child node
      labelled 'Physics Book' and the other pointing to a node labelled 'Chemistry Book'. From each of these books are a number of arrows each pointing to
      child nodes labelled 'Atom'. Beneath this diagram are two arrows. The first pionts to a rendered image, which shows a physics book and a chemistry book made of
      atoms in a play area. The second  arrow points to a graphic showing the rendered PDOM, containing the HTML in the following block.

Play Area

In zoomed in view of where books meet, surface temperature thermometer is cool and atoms jiggle a tiny bit.

Zoomed in Chemistry Book

Resting lightly on top of Physics Book. Atoms jiggle a tiny bit.

Zoomed in Physics Book

Below Chemistry Book. Atoms jiggle a tiny bit.

Parallel DOM Features

Parallel DOM Features

Demonstration of PDOM

Using Scenery for other web graphics

Other Scenery examples

Conclusions

Resources and Funders

Resources

Funders

Contact Us

Get Involved!