Building A11y & Inclusion into Interactive Science Simulations
summary
PhET Interactive Simulations rebuilds canvas/SVG/WebGL scenes into a mirrored HTML + ARIA layer so blind and keyboard users get semantic labels, live-region alerts and actual interaction rather than a “sea of black boxes.” The team converts ~50 sims to HTML5, uses a parallel DOM that maps visual objects to headings and buttons, implements keyboard grabs balloon (Space/Enter, arrow or WASD) with charge-state announcements, tests with screen reader users, and finds it works but still struggles with live-region timing and complex custom controls.
AI-written summary · about
chapters (26)
- 0:00Start
- 1:59Outline
- 2:55Introductions
- 3:35Experimentation
- 4:29Interactive Science Simulations
- 5:26PhET Interactive Simulations
- 7:11Balloons & Static Electricity demo
- 11:03Fexibility is Useful
- 11:44PhET's A11y Challenge
- 12:21Sea of Black Boxes
- 13:22PhET's Accessibility Initiative
- 14:22Inclusive System Architecture
- 15:14Traditional Approaches
- 17:27PhET's Approach
- 18:29Our PDOM has Power
- 18:47Technical Power
- 24:08Pedagogical Power
- 28:12Sea of Information demo
- 33:22PDOM Technical Summary
- 35:10Continued Challenges
- 38:42Big Take Aways
- 40:16Broader Beneficial Impact
- 41:20Concluding Message
- 42:38Available Sims
- 43:28Big Shout Out
- 44:23Resources & Funders
related talks
31mBringing the Web Back to the Blind
20mNonvisual Interaction Techniques at the Keyboard Surface
21mRethinking web accessibility: Using AR for people with disabilities
23mPractical A11Y for Web Apps
43mHow to Make a Web App Accessible to a Blind Person
01h 02mBeyond Compliance: Creating Exceptional Screen Reader Experiences in Learning Design
43mWalking Down the A11Y Road - Lessons Learnt From...
20ma11y & Interactive Canvases