markup for PhET radio buttons

[jessegreenberg]

From https://github.com/phetsims/molecules-and-light/issues/153.

Initial discussion about the pros and cons between using HTML and ARIA are in that issue. The problem was initially discovered because Safari doesn't cycle through the radio buttons with the arrow keys.

It sounds like the next step is to test how ARIA radiogroup and radio roles perform on different screen readers. That will give us a better indication of whether an ARIA solution is worthwhile, or whether we can continue to use native radio buttons.

[jessegreenberg]

Here are some ARIA examples that @terracoda found:

https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

We should test these no VO + Safari, JAWS + Firefox, and NVDA + Firefox to hear how things sound and compare them to traditional HTML radio buttons.

[jessegreenberg]

@terracoda does that test seem OK to you or should we check other things?

[jessegreenberg]

For reference, here is a set of traditional radio buttons: https://jsfiddle.net/pvf8bpnv/

[jessegreenberg]

Here is the output from NVDA with radio traditional radio buttons:

Edit fiddle - JSFiddle document Please specify your gender: Male radio button not checked 1 of 4 Female radio button checked 2 of 4 Other radio button checked 3 of 4 Prefer not to specify radio button checked 4 of 4

[jessegreenberg]

In this example: https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-2/radio-2.html

NVDA sounds like

Pizza Crust Grouping Regular crust radio button not checked 1 of 3 Deep dish radio button checked 2 of 3 Thin Crust radio button checked 3 of 3

[jessegreenberg]

NVDA sounds identical in https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html (aria-activedecendent)

[terracoda]

@jessegreenberg, that testing list seems good. I always like to navigate the sim in Chrome and have a listen in Chrome with ChromeVox just to see if anything is weird. I don't think many people use ChromeVox, but a lot of people use Chrome.

[terracoda]

Noting that both VO and JAWS will repeat legend text when focus is moved to each radio button. This is an important design consideration as it can create a lot of unnecessary verbosity for simulation use, and make for some strange verbal pairings. For example, the legend text and the radio button's label may sound strange when put together if one does not consider that they will be read together.

Léonie Watson (2016) mentions that JAWS has this verbosity issue in this article on using fiedlset/legend, but I found Voice Over does the same thing. While listening to this test code for radio buttons at maxdesign with Voice Over and Safari, the legend text was repeated for each radio.

[jessegreenberg]

This issue was meant to observe different behaviors of radio buttons because of the discussion in https://github.com/phetsims/molecules-and-light/issues/153. In that issue we decided to use typical HTML for radio buttons and allow Safari to do its default behavior for keyboard interaction, so I think this issue can be closed.