Build an Atom Parallel DOM HTML Mock-up

[terracoda]

I've committed a draft Parallel DOM for Build an Atom.

Is there a way to host it on github, so people can see the rendered page and not just the code?

Code is here: https://github.com/phetsims/a11y-research/blob/master/html-sketches/build-an-atom/baa-pdom.html

Main features in this BAA PDOM

• aria listboxes marked up with HTML headings and lists with the role="listbox".
• accordions for the "Details About My Atom" marked up with the HTML details element.

@zepumph, @jessegreenberg, @emily-phet comments welcome.

EDIT from MK:

Hey look what I found! It renders it through github.

http://htmlpreview.github.io/?https://github.com/phetsims/a11y-research/blob/master/html-sketches/build-an-atom/baa-pdom.html

[terracoda]

Tested VoiceOver (Safari 10.03 Mac OS 10.12.3)

The listboxes read well with VoiceOver. The details element provides keyboard accessibility out of the box with no javascript, but does not seem to provide any semantics recognized by VoiceOver out of the box.

[terracoda]

The details/summary element is made accessible to VoiceOver (and other screen readers) by adding the role="button", managing aria-expanded="true/false", and using tabindex="0"

HTML now looks like:

<details open>
<summary role="button" aria-expanded="true" tabindex="0">Summary Label</summary>
<!-- Summary Content -->
<ul>...
</ul>
</details>

See Screen Readers and details summary for full discussion.

Following commit adds the aria polyfill (https://github.com/phetsims/a11y-research/commit/643d123578155d56b64b06aa3ae998f5c019bd25)

Note: Added open attribute on details element.

[terracoda]

@zepumph please note that the BAA: PDOM design document is not in-synch with the HTML mock-up as a few ideas have evolved since the design crit discussion and the a11y-interactive meeting.

[terracoda]

@zepumph, I updated the design document to match the marked-up PDOM.

[zepumph]

I like the structure @terracoda! I think that this is going really well. Listbox seems like a good option.

I added a few more js files that I saw in an example, and things are selecting now. I experimented with manipulating the control panel buttons, but didn't want to go too far down a single path without talking with @terracoda. Good stuff.

[terracoda]

@zepumph, thanks! And thanks for html preview link. That's awesome.

[emily-phet]

@zepumph, the HTML preview is so helpful! Thanks so much.

[terracoda]

@zepumph, I updated the html a little, played with region role on my atom. With region role, it is identified as a region within a region, without, it seems to be identified as a group. I've left region role on for now.

I have also sketched-out an interaction pattern. I will start a new issue for that.

Edited: Interaction Pattern is Idea 2 Interaction Pattern

Posted issue phetsims/build-an-atom#244, too.

[zepumph]

Unassigning until we work on BAA again.