Design PDOM for Multiscreen simulations

[zepumph]

I'm not sure if this is duplicate from something else, but one piece that came out of the a11y sprint is that we need to solidify what the PDOM structure for multiscreen sims are.

A few specific thoughts:

• What should the H1s look like, https://github.com/phetsims/area-model-common/issues/149
• Does more work need to be done on the nav bar https://github.com/phetsims/a11y-research/issues/94

Is there anything else that needs to be done in terms of design?

[zepumph]

Note that this was created in response to phetsims/area-model-common#149 and thus may have a higher priority than I gave it, assigning to @emily-phet too.

[zepumph]

Realted: https://github.com/phetsims/joist/issues/491 about screens being h1s

[terracoda]

@zepumph (edited meant to reply to @zepumph and not @jonathanolson), I have a mock up for Build and Atom. I was going to adjust the approach in that HTML mock-up (see https://github.com/phetsims/a11y-research/issues/94) and create a design pattern md file. That would be the next priority I think.

[jessegreenberg]

6/1/18 a11y meeting:

We discussed the structure, overall it is really nice. Two questions came up.

The first question was whether the home screen needs a keyboard help dialog, either just the normal sim dialog or a simplified one for the home screen. We decided that it likely doesn't need one and we can revisit the question if there is evidence that one is needed.

The second question was how to handle general sim content that is shared across screens. We discussed something like the following heading structure:

<section>
  <h1>Sim Title</h1>
  <...information specific to the simulation> (like "This is an interactive sim...")
<section>
<article>
  <h1>Screen Name</h1>
   <...information specific to the screen>
  <h2>Play Area</h2>
    <...stuff in the play area>
  <h2>More Controls</h2>
  <...stuff in the more controls area>
</article>
<article>
  <h1>Screen 2 Name</h1>
  <...>

We considered just having h1 as the sim title and having h2 as the screen name, shifting each heading down a level. There were concerns that this would eat up space for lower level headings if we need them in the future. And we agreed that it is OK for a document to have more than one h1, especially if there it is under an article or section.

[jessegreenberg]

It is not clear to me how that structure would work for single screen sims yet. Maybe on a single screen sim we just don't include that top section? Then we would have to remember to move the sim specific section under the article.

[mbarlow12]

Could the sim-level content be optional? So for single screen sims, all the content would be included in the screen's scene summary (or whatever we're calling it), and perhaps multi-screen sims could assert the presence of the sim-level html?

[mbarlow12]

Also, we should probably merge https://github.com/phetsims/scenery-phet/issues/379 and this issue in some way—as @zepumph pointed out in https://github.com/phetsims/scenery-phet/issues/379#issuecomment-392210107 these are almost identical and have some useful complementary information.

[terracoda]

@mbarlow12, I do not understand what you mean by "sim-level" html, but hopefully this will be resolved with a working example.

[terracoda]

@zepumph, @emily-phet, @jonathanolson I have created a HomeScreen.md file over in phetsim/joist.

@arouinfar has asked for feedback for how we populate the H1's for each screen over in #112.

@zepumph, I will update the HTML examples in #94, as I made some modifications when I coded up the examples in the HomeScreen.md file. For the final code, I am hoping we can just refer to the MD file.

I think I will have to make at least one other separate Mark Down file for the PhET Menu button which is a component within the Home Screen.

[terracoda]

@zepumph, I am unassigning myself and assigning back to you for comment. Please assign @jonathanolson if his expertise is needed.

[terracoda]

HTML example in #94 is ready for review.

[terracoda]

@zepumph to answer your questions in https://github.com/phetsims/a11y-research/issues/104#issue-326265386

1. I think the H1s for area-model-common should look like the H1s in the HomeScreen.md file
2. the example for Build an Atom in #94 have been updated

I marked everything ready-for-review, and commented in all related issues. Is there anything else I need to do?

[zepumph]

I'm going to implement the h1 structure first as part of https://github.com/phetsims/area-model-common/issues/149#issuecomment-398909150, things are looking very nice! Thanks @terracoda.

[zepumph]

This issue holds the good design work, and I will implement the md file over in phetsims/joist#496. Closing

[terracoda]

We have design 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.

Just thought it would be nice to have a visual example in the issue.