Pose a range of access issues for students with disabilities
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
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.
Sea of Black Boxes
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
to use the keyboard to grab and move the balloon
to explore where and how charges are accumulated
to collaborate with the classmates in a group activity
System constraints
And still run natively in a browser
Interface easily with assistive technology, such as screen reader software
Offer flexibility for pedagogical design & use, like the visual simulations
Traditional Approaches
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
Our PDOM has Power
Technical Power
HTML provides
Familiar semantic structure
Easy keyboard accessibility for native HTML form elements
Customizable repository for naming & describing sim objects
ARIA supports
Special semantics for custom interactive objects
Description during interaction with ARIA-live regions
PDOM A11y View {demo}
Pedagogical Power
Robust platform for non-visual implicit scaffolds
Sea of Information {demo}
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
Keyboard users: interactive sim objects often don't look like HTML controls
Mark-up limitations: Standard HTML is limited for complex interactive objects
Accessibility of custom interactions: many objects like the balloon that will need explicit instruction
Complex elements & roles: have complex keyboard design patterns (how will young users react?)
Fixed combinations of AT & browsers: limit platforms & exhibit many inconsistencies
Help: Avoiding verbosity & repetition when using screen readers
Help: Tips on using live regions
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
Broader Beneficial Impact
Benefit all keyboard users
Descriptions we have designed may benefit students with cognitive disabilities
Designers & developers of interactives may want to consider this approach
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.
