Skip to end of metadata
Go to start of metadata

Introduction

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.

Current Demos

  • John Travoltage Simulation with Keyboard and Screen Reader Accessibility
  • John Travoltage Simulation Prototype with sonification

One Sim. Multiple On-Ramps.

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:

Screen shot of the HTML 5 version of John Travoltage Simulation in development.

Try the demo at: https://jhung.github.io/john-travoltage-html/

Updating Description of the Sim

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.

Initial Description

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."

Foot Rub Description Table

 

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.

 

Hand Description Table

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 doorknobtoward
No change in position-His* hand isthe 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 doorknobHis hand has moved slightlyaway fromthe 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

 

Charge Description Table

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 dischargedand 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 chargesThere are

a small

a moderate

a large

-number of charges on John.

 

Example Descriptions

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."

Scene Description and Leg Position Changes (Sep 2016)

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 DescriptionCurrentProposed
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 StatusCurrentProposed
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."

 

Leg and Arm as an HTML Slider

Reasoning

  • A slider is immediately understood by a screen reader.
  • Non-sighted keyboard users would understand how to use it.
  • The slider maps nicely to the range of motion of the arm or leg:
    • Each extreme of the slider would be the extremes of the limb motion
    • Middle of the slider would be closest arm position to the door knob, or the perpendicular position of the leg to the carpet.
  • Native keyboard support:
    • Cursor keys move the slider.
    • PgUp / PgDown skips by increments.
    • Home / End moves from one extreme to the other.

No-Wrapping

  • If the arm is implemented using a slider, there will not be any wrapping when the user has reached an extreme. They will be forced to move in the opposite direction. This is mitigated by the supported native short-cut keys.

Arm Implementation as Slider

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.

Implementation Details

  • Slider label "Hand position"
  • As the position on the slider moves / hand moves around the arc:
    • the sim description is updated with new text if the region changes.
    • the AT would read back the region if it changes
    • two notes are played indicating both proximity and direction of arm movement relative to the doorknob.
  • The default value is approximately 12 (exact value TBD)

Interesting Moments

MomentResult
Focus lands on arm
  • Focus outline appears around arm.
  • Current region is read back to the user (i.e. "Hand is close to the doorknob").
  • Focus is on the slider in parallel DOM.
Up / Right Arrow Press
  • Arm move clockwise 1 unit
  • Slider increases value by 1
  • 2-note sonification is played (see below for description)
Down / Left Arrow Press
  • Arm moves counter-clockwise 1 unit
  • Slider decreases value by 1
  • 2-note sonification is played (see below for description)
PgUp Press
  • Arm move clockwise 5 units
  • Slider increases value by 5
  • 2-note sonification is played (see below for description)
PgDn Press
  • Arm moves counter-clockwise 5 units
  • Slider decreases value by 5
  • 2-note sonification is played in decreasing tone (see below for description)
Arm movement
  • sim description is updated as the arm moves around the arc.
  • If the arm does not change regions, then there is no need to update the description.
  • If the arm changes regions:
    • sim description is updated
    • screen reader reads out the change in regions (not the full description, just the arm region change).
0
  • "Position 0, farthest from the door knob".
1 to 8
  • "Position #, very far from the door knob".
  • Where # can be 1, 2, 3, 4, 5, 6, 7, or 8.
9 to 16
  • "Position #, far from the door knob".
  • Where # can be 9, 10, 11, 12, 13, 14, 15, or 16.
17 to 24
  • “Position #, neither far or close to the door knob”.
  • Where # can be 17, 18, 19, 20, 21, 22, 23, or 24.
25 to 32
  • "Position #, somewhat close to the door knob".
  • Where # can be 25, 26, 27, 28, 29, 30, 31, or 32.
33 to 40
  • "Position #, close to the door knob".
  • Where # can be 33, 34, 35, 36, 37, 38, 39, or 40.
41 to 49
  • "Position #, very close to the door knob".
  • Where # can be 41, 42, 43, 44, 45, 46, 47, 48, or 49.
50
  • "Position 50, closest to the door knob".
51 to 59
  • "Position #, very close to the door knob".
  • Where # can be 51, 52, 53, 54, 55, 56, 57, 58, or 59.
60 to 67
  • "Position #, close to the door knob".
  • Where # can be 60, 61, 62, 63, 64, 65, 66, or 67.
68 to 75
  • "Position #, somewhat close to the door knob".
  • Where # can be 68, 69, 70, 71, 72, 73, 74, or 75.
76 to 83
  • “Position #, neither far or close to the door knob”.
  • Where # can be 76, 77, 78, 79, 80, 81, 82, or 83.
84 to 91
  • "Position #, far from the door knob".
  • Where # can be 84, 85, 86, 87, 88, 89, 90, or 91.
92 to 99
  • "Position #, very far from the door knob".
  • Where # can be 92, 93, 94, 95, 96, 97, 98, or 99.
100
  • "Position 0, farthest from the door knob".

Leg Implementation as Slider

Interesting Moments

MomentResult
Focus lands on the leg
  • Focus outline appears around leg.
  • Current region is read back to the user (i.e. "Foot is on the carpet").
  • Focus is on the slider in parallel DOM.
Up / Right Arrow Press
  • Leg move clockwise 1 unit
  • Slider increases value by 1
  • 2-note sonification is played (see below for description)
Down / Left Arrow Press
  • Leg move counter-clockwise 1 unit
  • Slider decreases value by 1
  • 2-note sonification is played (see below for description)
PgDn Press
  • Leg move clockwise 5 units
  • Slider increases value by 5
  • 2-note sonification is played (see below for description)
PgUp Press
  • Leg move clockwise 5 units
  • Slider increases value by 5
  • 2-note sonification is played (see below for description)
Leg Movement
  • sim description can be updated as the leg moves around the arc.
  • If the leg does not change regions, then there is no need to update the description.
  • If the leg changes regions:
    • sim description is updated
    • screen reader reads out the change in regions (not the full description, just the leg region change).
0 to 9
  • “Position #, foot is off the carpet”.
  • Where # can be values 0 to 9.
10 to 20
  • “Position #, foot is on the carpet” + "A charge has been gained" if a charge is acquired.
  • Where # can be values 10 to 20.
21 to 30
  • “Position #, foot is off the carpet”.
  • Where # can be values 21 to 30.

Sonification

See: PhET John Travoltage Sonification Design

 

Design Sketches

Screen Reader Perspective

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.

Interaction Mock-Up

The following are mock-ups illustrating some of the above elements put together with visuals from the simulation.

Current sketch - Dec, 2015 (Download)

Learning Outcomes

  • distance and charge are related
    • The more charge you have, the farther you can be to discharge
    • The less charge you have, the closer you need to be to discharge
  • electrons repel each other
  • it is possible to create a generator by putting the finger close to the doorknob and constantly rub your feet (although this isn't directly related to static electricity)

Interactive components

  • Arm rotation
    • controls distance from finger to doorknob
    • 360 degrees of movement
  • Foot shuffle
    • controls the quantity of charge
    • 180 degrees of movement

Design and Interaction Notes

  • For younger learners - keep it simple
  • Travoltage is often used as an introductory sim for PhET

Charge / discharge behaviour:

  • distribution of the charge within the body does not matter
  • there is a maximum quantity of charge (i.e. there is a finite capacity)
  • discharge is at a constant rate regardless of the quantity of charges.
  • No labels