The goal is to create an accessible and inclusive design and implementation of the existing John Travoltage simulation.
The design and development approach is to create an equivalent version of the simulation using solely native HTML 5 elements. The purpose of this approach is to create an interaction that is natively supported by assertive technologies, and integrate this as the parallel DOM to the existing simulation. Design and usability will be informed by a participatory design process involving experts and stakeholders.
To a sighted user, the John Travoltage sim appears as it would on the left below. To a non-sighted user, the same simulation would appear like on the right below.
Coupled with sonification, updating text descriptions, support for keyboard and gesture input - users can have multiple ways of interacting with the sim.
This is what the current development version of the native HTML 5 version is like:
Try the demo at: https://jhung.github.io/john-travoltage-html/
After the sim's header, there is a description of the sim. As the user interacts with the sim, this description is updated to reflect the current state of the sim. The intention is that the user can come back to this description any time to get an updated description.
Because the simulation has a finite possible states, it's possible to automatically generate a text description to reflect what is happened visually.
The following paragraph is the sim's description on first load, and before any action has been performed. This initial description is replaced by sentences taken from the tables below once the user has interacted with the sim.
"Actor John Travolta is standing with a foot on the rug, and his hand is very close to the doorknob."
Rubbing has occurred with a change in charge qty. | John has rubbed his foot on the rug and has gained | a small a moderate a large the maximum | number of negative charges. |
---|---|---|---|
No rubbing has occurred and no change in charge qty. | No description needed. |
Additional description for slight foot movements that don't change the quantity of charge in a significant way. This will not be implemented immediately and will depend on initial testing.
Rubbing has occurred but only slight change in charge qty. | John has rubbed his foot on the rug slightly and he still has a | small moderate large | number of negative charges. |
---|
Moved away from doorknob | His* hand has moved | away from | the doorknob, and is
| closest to very close to close to somewhat close to neither far or close to somewhat far from far from farthest from | it.
|
---|---|---|---|---|---|
Moved toward doorknob | toward | ||||
No change in position | - | His* hand is | the doorknob. |
* replace "His" with "John" if there is no foot description.
Additional description for slight movements that don't result in a change in the descriptive hand position region. This will not be implemented immediately and will depend on initial testing.
Moved slightly away from doorknob | His hand has moved slightly | away from | the doorknob, and is still
| closest to very close to close to somewhat close to neither far or close to somewhat far from far from farthest from | it. |
---|---|---|---|---|---|
Moved slightly toward doorknob | toward |
The following description is rendered only when there has been a discharge.
"John's small number of negative charges have been discharged and there are no negative charges left."
Change in the quantity of charges after a discharge occurred | The small The moderate The large | number of extra negative charges on John have been discharged | and there | are | no a small number of a moderate number of a large number of | negative charges left. |
---|---|---|---|---|---|---|
No discharge and no change in quantity of charges | There are | a small a moderate a large | - | number of charges on John. |
The following is an example of how a description of the sim updates as a user interacts with the game.
Description text | |
---|---|
Default description on sim load | "John is standing with a foot on the rug, and his hand is very close to the doorknob." |
After foot has moved and a few charges have been gathered. No hand movement. | "John has rubbed his foot on the rug and has gained a small number of negative charges. His hand is very close to the doorknob." |
After hand is moved closer to the doorknob | "John's hand has moved toward the doorknob, and is very close to it. There is a small amount of charges on John." |
A few more charges are gained and some discharge occurs. | "John has rubbed his foot on the rug and has gained a moderate number of negative charges. His hand is very close to the doorknob. The large amount of extra negative charges on John have been discharged and there is a small amount of negative charges left." |
Based on user experiences, the strings used to describe the movement of the foot needed to change to better reflect what is happening visually and in the model.
Rename the foot slider label to "Leg swing".
Scene Description | Current | Proposed |
---|---|---|
Default Description | John is standing with his foot on the carpet, and his hand is close to the doorknob. | “John is near the door and standing on a rug. His hand is close to the metal doorknob, and he is ready to swing his leg to rub his foot on the rug.” |
With charges and hand position change | John is standing with his foot on the carpet, and his hand is close to the doorknob. He has 19 charges. | “John has [#] of electron[s] on his body. His hand is [close / very close / etc.] to the metal doorknob, and he is ready to rub his foot on the rug." |
Foot Slider and Electrons Status | Current | Proposed |
---|---|---|
Foot on carpet, no charge gained. | “Position 18 on the carpet.” | "Position 18, foot rubbing on the rug." |
Foot on carpet, charge gained. | “Position 17 on the carpet." "Total electrons: 1” | "Position 18, foot rubbing on the rug." "Electrons on body: 1" |
Foot off carpet | "Position 10 off the carpet." | "Position 10, foot off the rug." |
Implement the arm and leg as an HTML slider. For further background on this decision, see PhET John Travoltage Arm Implementation Research.
Reasoning
No-Wrapping
To someone using a screen reader, the hand position is controlled by a slider with values ranging from 0 to 60. By default the slider will be at position 12. As the user adjusts the slider, the screen reader will read back the slider position and its relative position to the door knob.
To a sighted user, the arm can be dragged around in a circle but the motion stops at the 0 (or 60) mark at the top of the circle.
Moment | Result |
---|---|
Focus lands on arm |
|
Up / Right Arrow Press |
|
Down / Left Arrow Press |
|
PgUp Press |
|
PgDn Press |
|
Arm movement |
|
0 |
|
1 to 8 |
|
9 to 16 |
|
17 to 24 |
|
25 to 32 |
|
33 to 40 |
|
41 to 49 |
|
50 |
|
51 to 59 |
|
60 to 67 |
|
68 to 75 |
|
76 to 83 |
|
84 to 91 |
|
92 to 99 |
|
100 |
|
Moment | Result |
---|---|
Focus lands on the leg |
|
Up / Right Arrow Press |
|
Down / Left Arrow Press |
|
PgDn Press |
|
PgUp Press |
|
Leg Movement |
|
0 to 9 |
|
10 to 20 |
|
21 to 30 |
|
See: PhET John Travoltage Sonification Design
A rendering of the John Travoltage simulation as perceived by a screen reader.
The diagram shows the simulation in its default state, and after the user has gathered electrons and has discharged them.
The following are mock-ups illustrating some of the above elements put together with visuals from the simulation.
Current sketch - Dec, 2015 (Download)
Charge / discharge behaviour: