phetsims / john-travoltage

"John Travoltage" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/en/simulation/john-travoltage
GNU General Public License v3.0
4 stars 8 forks source link

(PDOM) Orientation vertical for Arm Swing slider #454

Open terracoda opened 2 years ago

terracoda commented 2 years ago

In the initial release of John Travoltage we kept the sliders with the same orientation (horizontal). This meant the default go to keys to use were the Left and Right Arrow keys. The Keyboard Shortcuts dialog look like this:

image

With the release of the sim with Voicing we changed the default keys in the Keyboard Shortcuts dialog to prefer the Up and Down Arrow keys. This better matches the visual experience when a learner is using the keyboard. The Keyboard Dialog now looks like this: image

We have not yet explicitly changed the aria-orientation of the Arm Swing in the HTML to be aria-orientation="vertical". Since the "horizontal" orientation is the default, is not explicitly read out when using screen reader software. However, an orientation of "vertical" is read out (at least with VoiceOver, it is read out). The vertical orientation cues blind learners to use the Up and Down arrow keys. I have heard this in interviews.

Since we changed the preferred keys to be Up and Down, and updated the Keyboard Shortcuts dialog, I think we should take the next step and actually change the orientation of the Arm Swing slider so that it presents itself as a vertical slider. This would alert screen reader users to start their exploration with the Arm Swing by using the Up and Down arrows. Of course, all arrow keys will work, but because of the circular motion of the Arm Swing, one set of Arrow keys (the Up and Down keys) seem to feel visually more correct when starting the exploration with the Hand pointing at upper door.