phetsims / reactants-products-and-leftovers

"Reactants, Products and Leftovers" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
1 stars 4 forks source link

Add keyboard navigation to this sim #55

Closed jessegreenberg closed 7 years ago

jessegreenberg commented 7 years ago

@pixelzoom this was another sim that came up as a potential sim for keyboard navigation. Unlike https://github.com/phetsims/balancing-chemical-equations/issues/125, this sim does use AccordionBox, and it looks like most of the UI leverages common components. Do you have any thoughts or concerns about adding keyboard navigation to this sim?

pixelzoom commented 7 years ago

I took a quick look through the codebase, and it looks like this sim uses standard UI components (push buttons, radio buttons, spinners, accordion box) wherever possible. And I don't see any custom UI components.

jessegreenberg commented 7 years ago

Great, thanks @pixelzoom, we will proceed with this sim.

Now that phetsims/scenery#669 is done, the only thing that needs to be done for this is specify focus order.

In a meeting 9/19/17, it was requested that we make a best guess for keyboard navigation order and deploy a version for design team to review.

We also decided that to avoid mega github issues we would start design docs for a11y discussions, @terracoda could you please start one for Reactants Products and Leftovers?

jessegreenberg commented 7 years ago

My "best guess" for keyboard navigation would be something like this. @zepumph would you please give this a shot? Feel free to change order if you think something else would be more intuitive. But I would also suggest if it looks like this will take more than a few minutes we should ask designers for an explicit order before spending much time.

Sandwiches Screen:

Molecules screen

Game screen

pixelzoom commented 7 years ago

@jessegreenberg said:

We also decided that to avoid mega github issues we would start design docs for a11y discussions, @terracoda could you please start one for Reactants Products and Leftovers?

For specific issues, I find that having a GitHub issue is superior. With one Google doc for all discussions, trying to find the history and decisions related to a specific issue is often like trying to find a needle in a haystack. I'd rather have a few big GitHub issues than 1 giga Google doc. My 2 cents...

zepumph commented 7 years ago

For specific issues, I find that having a GitHub issue is superior.

@pixelzoom I think that you are correct for specific problems, but the thought here is for the general design, paralleled to our design docs for PhET Sims (both ports and from scratch).

As a team, accessibility + designers + @ariel-phet + @oliver-phet discussed it this morning and came to a conclusion about how we want to proceed with designing accessibility in sims. I think it largely aligns with your thoughts where github issues are good for individual topics, and leaves the docs for the broad strokes.

It would also be good for you to know that in a11y there is often much more than 1 design doc (keyboard nav doc, sonification doc, descriptions doc, other assets), so I wouldn't be too worried about a huge design doc.

jessegreenberg commented 7 years ago

Thanks @pixelzoom, agreed for specific issues. For a11y, we have seen issues like https://github.com/phetsims/john-travoltage/issues/222 which grew over general a11y design discussions and many iterations, so we we thought it was best to have a design doc(s) that track a11y considerations for each sim.

jessegreenberg commented 7 years ago

Note this sim also has this issue: https://github.com/phetsims/sun/issues/316

terracoda commented 7 years ago

@jessegreenberg, I started a design document called RPAL: A11y Design Main

zepumph commented 7 years ago

@terracoda here is a dev version to help guide you in the design. @jessegreenberg and I worked this week to get things pretty good. I didn't mess with the game screen at all, but it seems pretty good out of the box (although it is a bit weird for the start over button to be first).

http://www.colorado.edu/physics/phet/dev/html/reactants-products-and-leftovers/1.2.0-dev.0/reactants-products-and-leftovers_en.html?accessibility

Hopefully it will do as a first pass and will help guide feedback. I'm going to close this issue now, to be taken over by the design doc.