Reactants, Products and Leftovers A11y View: Visual and Described content side by side

The accessible version of Reactants, Products and Leftovers is embedded in the iframe below. As you interact with the visual sim in the iframe with either a keyboard or mouse, the descriptions for the sim automatically update on the right in a structured Parallel Document Object Model, or PDOM. Interactive Alerts (in orange) announce key changes of what is happening during interaction, while the dynamic descriptions (in green) automatically update in the background, maintaining an up-to-date description of the state of the sim and all its objects. Static descriptions (in blue) identify regions and objects and do not change.

Reactants, Products and Leftovers in iframe

Reactants, Products and Leftovers descriptions structured in a Parallel DOM

Interactive alerts

❬assertive update❭

❬polite update❭

❬assertive alert update❭

❬polite status update❭

Static and Dynamic Descriptions