Keyboard and Screen Reader Accessibility in complex interactive science Simulations: Design Challenges and Elegant Solutions
PhET Interactive Simulations
Implementation Overview: Scenery
- Render graphics with custom scene graph
- Uses a combination of Canvas, SVG, WebGL
- Not accessible out of the box or in combination
- Solution:
- Parallel DOM (PDOM)
- Invisible HTML, rendered by our infrastructure
- Provides standards based accessibility features
Iterative Design
Challenge 1: Sliders
- Students should be able to:
- Quickly jump between extreme values
- Reach every value in the slider range
- Make quantitative comparisons, convenient for mental calculations
Solution 1: Sliders
- Added the following features:
- Shift modifier to allow access to all values in the range
- Variable step size to access rounded input values easy for mental math
Challenge 2: Draggable arm and Leg
- Students should be able to:
- Easily access electron charge and discharge scenarios
- Understand the relative location of arm and leg during interaction
Solution 2: Draggable arm and leg
- Decreased input value ranges to make it easier to reach specific locations
- Created description strategy to make interaction meaningful
Challenge 3: Freely draggable balloon
- Students exploring visually or with an assistive device should be able to
- Pick up, move, and release the balloon intuitively
- Recognize balloon as an interactive object
- Recognize balloon as an interactive object
Solution 3: Freely draggable balloon
- Split balloon into two interactive objects: "Grab" Button and "Draggable" Object
- Add visual cues for sighted users
Resources and Funders
Resources
Funders
- The National Science Foundation (DRL-1503439 and DRL-1621363)
- The Hewlett Foundation
- University of Colorado
Contact Us
Get Involved!
