A11y Semantics for bottom bar in single and multi-screen sims

phetsims / a11y-research

a repository to track PhETs research into accessibility, or "a11y" for short

MIT License

3 stars 0 forks source link

A11y Semantics for bottom bar in single and multi-screen sims #94

Closed terracoda closed 3 years ago

terracoda commented 6 years ago

See https://github.com/phetsims/a11y-research/issues/25 for historical discussion.

In March 6th Keyboard Nav Meeting, we decided to re-structure the bottom bar to better communicate the function/role of the bottom bar and to better communicate access to sim screen buttons in multi-screen sims.

@terracoda will post new HTML here and we can discuss any further code or design changes here.

terracoda commented 6 years ago

Using Build and Atom as an Example:

Multi-screen Sim Example

terracoda commented 6 years ago

I updated the actual template files. Will add 2 more examples to see what semantics we hear on the phet menu items.

Note added June 20: I am not adding any more examples. The multi-screen sim example is being reviewed.

terracoda commented 6 years ago

Adding links to the template files: Template Example:

terracoda commented 6 years ago

I have created a Design Pattern for multi-screen sims in joist. I used code from these mock-ups buyt have iterated a little bit. I will update these mock-ups once the design patterns is ok'd by the team.

terracoda commented 6 years ago

Mark down file for the Home Screen is in joist/doc/HomeScreen.md

terracoda commented 6 years ago

@zepumph, I have updated the index.html file in the baa-screens folder. I have put all the sim content on one page, so everything can be seen together.

FYI, I put horizontal rules in between sim screen.

Multi-screen Sim Example

Note that the code validates with warnings about the multiple H1 elements, and the JS that is supposed to collapse and expand the PhET Menu is not quite right. I'm not sure why it works for one button, but not the other.

terracoda commented 6 years ago

When on git hub, the javascript for the PhET Menu does not work on either PhET Menu button.

terracoda commented 6 years ago

The example in https://github.com/phetsims/a11y-research/issues/94#issuecomment-398888379 is updated, and awaiting review by team.

terracoda commented 6 years ago

Reminder, that I will need to add the Global Mute Sound button at some point before September.

zepumph commented 5 years ago

This issue is quite stale, likely the bottom bar is looking really good for single screen sims, since we have published a few already. Unassigning myself until work continues for multi-screen sims and my feedback and time is needed.

terracoda commented 5 years ago

I will double check what has been implemented and see if anything is missing. True, the bottom with mute sound, keyboard shortcuts, and PhET menu has been working fine for people thus far.

terracoda commented 3 years ago

We have designed the multi-screen sim for Ratio and Proportion.

We can use the sim as a good pattern. The buttons were updated to work well with desktop screen readers and mobile VoiceOver.

Here are screen shots of the final Home Screen, Discover Screen and Create Screen for Ration and Proportion. The A11y View text shows that when changing screens, focus starts at the top. On the Home Screen, I just happen to have my focus on the first screen button.

terracoda commented 3 years ago

Oh this might not be the right issue for the previous comment.

terracoda commented 3 years ago

Moving previous comment it #104

jessegreenberg commented 3 years ago

https://github.com/phetsims/a11y-research/issues/94#issuecomment-772737948 look great! This issue was also about the navigation bar, is there anything else to do for that or can this issue be closed now?

terracoda commented 3 years ago

And just an FYI, I updated https://github.com/phetsims/joist/blob/master/doc/HomeScreen.md to include Ratio and Proportion as one of the examples.