No feedback when the Mute Sound button is toggled

[terracoda]

Using MacOS 10.12.3 with VoiceOver
Safari 10.0.3

When I toggle the Mute Sound toggle button without the VO keys, I do not get an announcement that the sound has been muted, nor that it has been un-muted or enabled when I toggle it again. Unfortunately, I get zero feedback (i.e., not even checked or unchecked).

The help I get from VO is:
"To select or deselect this checkbox, press Control-Option-Space." Strangely, there is no indication of the state of the toggle (checked/not checked, pressed/not pressed), but maybe that is how a toggle works?

If I toggle the button with the VO keys (Control + Option) + Space key I do, however, get some feedback. Unfortunately, with the single label, "Mute sound", for the button, I find the message is a little unclear.

• "deselect, Mute sound, toggle button." and then on toggling again,
• "select, Mute sound, toggle button."

I think dynamically aligning a changing label with the changing icon might solve the problem. There are two icons to represent that sound is on (not muted) or off (muted). I suggest adding "Sound muted" as the second label.

With this change, I think the button interaction things would sound more like this:
With VO keys

1. Tab to button:
   • "Mute sound, toggle button".
2. Press VO (Control+Option) + Space
   • "deselect, Sound muted, toggle button"
3. Toggling again with VO (Control+Option) + Space
   • "select, Mute sound, toggle button."

Without VO keys

1. Tab to button:
   • "Mute sound, toggle button"
2. Press space key:
   • Hear nothing, but label changes to "Sound muted."
3. Tab away and Shift Tab back again:
   • "Sound muted, toggle button"

The user could also use the arrow keys to re-read the label.
I still think it would be beneficial to announcement that the action was successful, like we do with the wall and the balloons in BASE, but I'm not sure if such an interaction alert is possible to implement in this sim.

@jhung, @jobara, @jessegreenberg how does this solution sound to you? How do feel about adding alerts as well as adding the new label?

I was also wondering if the switch role would be appropriate here, but I thought adding the dynamic label change might be simpler.

[jobara]

@terracoda I've talked to Joseph about things like this recently. He informed me that when the label of a toggle is switched it can sometimes confuse users and make them think that they are on a new control. Which is why you see on some video players a button labelled "play pause button" or something to that effect.

[jessegreenberg]

@terracoda I agree with @jobara, I think changing the label could lead to some confusion. We tried a dynamic label for a toggle button in BASE and it was confusing because the changing label made it unclear what the button was actually toggling. I think that is just how VO works with aria-pressed.

Adding an alert when pressed would be pretty simple, something like "Simulation sound off" or "Sumulation sound on"? Thoughts @terracoda @jobara and @jhung?

[jobara]

@jessegreenberg i think the alert is probably okay. I think you'll need to test out how it sounds with the typical reporting of the toggle state. ie. Does or should it interrupt the default announcements?

[jessegreenberg]

Ok, thanks, I will test it out and see how it goes. As for the alert, should we use "Simulation sound off" and "Simulation sound on" or something else?

[jessegreenberg]

In #224 we changed the HTML so that the button works with JAWS - maybe VO will provide more information automatically too, Ill test before adding alerts.

[jessegreenberg]

NVDA works nice in all browsers with the alert except for chrome.

When I press the button in Firefox I hear
"Mute sound toggle button, pressed, sim sound off."

I hear something similar in IE11 with NVDA, but Chrome always says "not pressed".

[jessegreenberg]

But that was the behavior in Chrome with NVDA for http://www.colorado.edu/physics/phet/dev/html/john-travoltage/1.3.0-dev.20/john-travoltage_en.html, so the change has not made things worse for that platform.

[jessegreenberg]

Seems to work great with JAWS and VO, getting ready to commit.

[terracoda]

@jessegreenberg thanks for adding the alerts and testing it. I think that is a good solution.

[terracoda]

@jobara, and @jessegreenberg please note that the label is already changing visually. My suggestion in comment #223 (comment) was to align that change in the non-visual experience.

@jessegreenberg, there a slight difference in Balloons and Static Electricity - both states of the toggle button are actually visible in that sim. Also, I don't remember "deselect" and "select" being used by VO in early BASE prototypes. Maybe that language is new in VO.

Regardless, the alerts do the trick, so thanks again for implementing them and testing them. You can close this issue :-)

[terracoda]

@jessegreenberg and @jobara, other browser feedback is more clear, so yes a text label is confusing because the screen reader is trying to accomplish this on its own.

Alerts are working for me :-)

[jessegreenberg]

Great! Thanks @terracoda, closing this issue.