Building Accessibility & Inclusion into Interactive Science Simulations


PhET Interactive Simulations Project

Taliesin Smith

#ID24, November 16, 2017

Outline

Introductions

Taliesin Smith

PhET Interactive Simualtions

PhET Interactive Simulations Project

Experimentation

Labs & Demonstrations

  • Key to exploring science
Student and teacher weearing safety glasses examining a blue liquid in a jar.
  • Not accessible all the time
  • Pose a range of access issues for students with disabilities
Student working together to explore air flow with a fan and small windmill prototype.

Courtesy of Allison Shelley/The Verbatim Agency for American Education: Images of Teachers and Students in Action. For more information about acceptable uses and licensing terms visit https://creativecommons.org/licenses/by-nc/4.0/.

Interactive Science Simulations

  • Are more readily available
  • Help students learn & think about science
  • Do not require special equipment
  • Create a safe lab-like exploratory experience
  • Allow students to experiment & discover science like a scientist

Images from PhET's facebook page.

PhET Interactive Simulations being used in a classroom with desktop computers. PhET Interactive Sim being used in foreign country and language. PhET Interactive Simulations being used by small kids for fun on the couch.

PhET Interactive Simulations

Several New HTML5 PhET Simulations.
  • Started in 2002
  • 170 science & math simulations
  • Run 100 Million+ times/year
  • 87 languages
  • Flexible, exploratory learning tools
  • Used with a diverse age range
  • Free of cost & openly licensed

Balloons & Static Electricity {demo}

PhET Sim Design

  • Intuitive & easy to use
  • Highly interactive
  • Real-time feedback
  • Fun & game-like
  • Very flexible
Balloons and Static Electricy Simulation

Fexibility is Useful

Actvities are diverse

Students working on a project.
Courtesy of Allison Shelley/The Verbatim Agency for American Education: Images of Teachers and Students in Action. For more information about acceptable uses and licensing terms visit https://creativecommons.org/licenses/by-nc/4.0/.

Abilities are diverse

  • Inclusive education creates integrated classrooms
  • 98% of students with disabilities are integrated into general education schools
  • 40% of their time is spent in general education classrooms

(Source: Texas Board of Education)

PhET's A11y Challenge

Everything is rendered graphically

with Scenery, a custom scene graph for HTML5.

Scenery makes interactive graphics

  • Using Canvas, SVG, or WebGL
  • Exposing no useful information within the DOM for accessibility

Scenery's graphics provide

  • No semantic structure. No keyboard operation. No text alternatives.
Balloons and Static Electricy Simulation

Sea of Black Boxes

Balloons and Static Electricity with empty black callouts pointing to objects in the sim.

PhET's Accessibility Initiative

Re-thinking accessibilty of PhET Simulation architecture through the lens of inclusive design.

Through this lens disability is defined as a mismatch between the user and the user interface.

Mismatch

user + black box = disability

Accessible simulation architecture

The ability of the system's architecture to build simulations that meet or flex to the needs of the user.

Removing the label of disability from the person, makes accessibility the responsibility of the design process.

Inclusive System Architecture

System goal: Build a sim that enables a blind student

System constraints

Traditional Approaches

HTML points to DOM which points to the AAPI which points to Accessibility Tree which points to user. Canvas, SGV and WebGL point to DOM which points to the AAPI which points to Accessibility Tree which points to user. Canvas subtree points to DOM which points to the AAPI which points to Accessibility Tree which points to user.

Difficult for PhET Sim Architecture

  • Accessibility information ends up in multiple places
  • WebGL didn't work with the Canvas subtree

PhET's Approach

Generate a parallel structure

  • matches all visual elements (in the scene graph)
  • with HTML elements
  • in a Parallel DOM
Canvas and html semantics point to the DOM which points to the AAPI which points to the Accessibility Tree, which finally points to user.

Our PDOM has Power

HTML5 power fist with ARIA knuckles. Power of A11y Technology.
Power fist holding a pencil. Power of Pedagogy.

Technical Power

HTML provides

ARIA supports

PDOM A11y View {demo}

Balloons and Static Electricy Simulation Accessibility view of Balloons and Static Electricity with side-by-side descriptions.

Pedagogical Power

Robust platform for non-visual implicit scaffolds

Exploration paths: high-level with headings, interactions with Tab key, deep level (line by line) with arrow keys.

Sea of Information {demo}

Accessible prototype of Balloons and Static Electricity.

PDOM Technical Summary

  • Compatible with Canvas, SVG, & WebGL
  • Minimizes complexity with simplified structure
  • Contains all accessibility information & descriptions in one place
  • Represents visual elements with native HTML elements (familiar to users)
  • Harnasses exisiting accessibility support by browsers & Assistive Technologies (HTML & ARIA)
  • Embraces WCAG principles creating a robust & flexible accessibility layer

HTML is often overlooked and under-valued. -Aaron Gustafson, #ID24 2017

Continued Challenges

Big Take Aways

  • Screen reader users explore & engage with the sim
  • Students familiar with keyboard commands easily use the sim with a keyboard
  • Keyboard presses are easily learned by users less familiar with using a keyboard
Blind user using Balloons and Static Electricity.

Broader Beneficial Impact

Concluding Message

Action and agency begin with the ability to imagine. - Danis Goulet

In the context of science, action and agency begin with the ability to experiment.

Students do best when they are able to study what interests them.

Ongoing design project

Find out more: phet.colorado.edu/en/accessibility

Available Sims

Published Simulations

Accessible Prototypes

Big Shout Out

Software developers & PhET team members

Collaborators at the IDRC

Resources & Funders

Resources

Funders

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

Contact me

Get involved! Follow PhET

/