Heading and content ideas to support a general use of the A11y View

[terracoda]

In issue https://github.com/phetsims/ohms-law/issues/74, I got some ideas for the presentation of the A11y View. I am just jotting them down in this issue, so I don't lose them. Other visual changes are also needed. Changes were originally discussed in issue or a design document that I need to find and hook into this issue, as well.

Using Ohm's Law version 9 as an example:

Page Title content:

• [x] Name of the sim plus "A11y View"
• [x] Ohm's Law A11y View

Suggested content for the H1 page heading for the A11y View page:

• [ ] Ohm's Law: Combined Accessible Views
• [ ] Ohm's Law with visible descriptions and alerts
• [ ] Ohm's Law A11y View: Visual and Non-visual content side by side
• [x] Ohm's Law A11y View: Visual and Described content side by side

Suggested Intro para for the page: The accessible version of Ohm's Law is embedded in the iframe below. As you interact with the visual sim in the iframe with either a keyboard or mouse, the descriptions for the sim automatically update on the right in a structured Parallel Document Object Model, or PDOM. Interactive Alerts (in orange) anounce key changes of what is happening during interaction, while the dynamic descriptions (in green) automatically update in the background, maintaining an up-to-date description of the state of the sim and all its objects. Static descriptions (in blue) identify regions and objects and do not change.

Subheading for Visual side:

• [x] Ohm's Law in iframe

Heading for Described side:

• [x] Ohm's Law descriptions structured in a Parallel DOM

Change Subheading for Alerts section:

• [x] "Interaction Alerts" should be "Interactive Alerts"

Add Subheading:

• [x] Just before Ohm's Law H1, add, "Static and Dynamic Descriptions" at the same level at the Alerts heading.

Minor Visual Design Change:

• [x] Add whitespace (padding or margin) to right side and bottom of text column.

Identify the iframe

• [x] I think we need a title attribute or aria-labelledby attribute on the iframe to identify it.

  <iframe id="iframe" title="Interact with Ohm's Law">

Move inline (and deprecated) html attributes to a CSS file: The following visual items should be moved to a CSS file.

• [x] On body: bgcolor="#F0F8FF" is deprecated.
• [x] On iframe: width=80% and height=60% are also deprecated. And I don't think values in percentages are allowed.
• [x] On iframe: scrolling="no" is obsolete.

Possible start to CSS file:

 body {
      backround-color: #f0f8ff;
  }
  iframe {
      width: 80%;
      height: 60%;
      overflow: hidden; /* Prevents a scrollbar, and clips content. */
  }

[terracoda]

@emily-phet, @jessegreenberg when there is time we can work on this. Putting it on-hold for now.

[zepumph]

I like the proposed changes. I have some time in accessibility either today or tomorrow. I may take a stab at some of this if that's alright with all.

[jessegreenberg]

Thanks @terracoda, good ideas. I am all for these changes, would be a big improvement.

My only recommendation would be to not use a separate CSS file in this case, as it is easier to create a single file with the grunt task, and a single file is easier to deploy to spot.

Thanks @zepumph!

[zepumph]

My only recommendation would be to not use a separate CSS file in this case, as it is easier to create a single file with the grunt task, and a single file is easier to deploy to spot.

Agreed it is nice to have the 1 file as the chipper template.

[terracoda]

@jessegreenberg, we could use in-line or in-page CSS using a styleattribute on each element, or by embedding the CSS in the head. Generally, I avoid doing that in web design work because one loses control of the global design of the site. But maybe it makes sense to use a more local approach here.

[zepumph]

or by embedding the CSS in the head

I think this would be preferred to me.

[jessegreenberg]

Agreed, @terracoda we have a template that is used to generate this view so as long as the CSS is defined in that file it will be applied to all sims.

[zepumph]

A large commit can be found here

forgot to mention the issue.

[zepumph]

@terracoda could you please have a look at ohms-law a11y-view again and make more recommendations the most current a11y view is only on master for ohms-law right now. Here is one way to look at it (if you're on vpn): http://phettest.colorado.edu/ohms-law/ohms-law-a11y-view.html

[zepumph]

I also just updated one idea on colors. It doesn't differentiate with static/dynamic descriptions, but I think it's enough for some feedback.

Some improvements that I see:

• I see (although not that important) that the alerts will push down the descriptions, and then shrink again. It would be nice if it was a consistent size (the orange section).
• (specific to Ohms law maybe?) When you move the sliders in the sim, it seems to break the sliders in the PDOM. Maybe that has to do with how we are copying the whole tree structure.

[terracoda]

@zepumph, is that link working for you? It is not opening for me. I will try again in the morning.

Regarding design ideas, I have some more ideas on how to differentiate the different types of descriptions using text color, background color, typography and maybe some fancy borders or underlining. It is important to not use color alone to differentiate things. The challenge here will be to clearly identify the three categories of descriptions without making the A11y View overly busy looking.

EM made a quick sketch in a google doc a long time back. I need to find that and make it look more cohesive.

[terracoda]

@zepumph, I got a "server time out" on that link. I'll check again in the morning ;-)

[zepumph]

@zepumph, is that link working for you? It is not opening for me. I will try again in the morning.

I'm sorry! You will have to be logged into vpn, if that isn't set up then I will just make a dev release.

[terracoda]

@zepumph, I haven't used any vpn as of yet, but any case I will need to continue in the morning ;-) so no rush on my account.

[zepumph]

Sounds good. When you get to it, http://www.colorado.edu/physics/phet/dev/html/ohms-law/1.4.0-dev.10/ohms-law-a11y-view.html.

We should get you set up with vpn so that you could use phettest. It would solve all of your needs in terms of the github previewing that we have been doing.

[terracoda]

@zepumph, I had a quick peak. It's looking great, definitely inline with what I was thinking, but we need to have good contrast between text and background color, so that will need a little more thought.

[zepumph]

I thought so too, but didn't want to waste me time on that (because I'm just atrociously bad at noticing contrast). Keep me posted on what you come up with.

[jessegreenberg]

@zepumph this is really great, awesome to see aria-labels and non-0 width inputs in the a11y-view!

It doesn't differentiate with static/dynamic descriptions

@zepumph do you have any thoughts for how we might accomplish this? Initially, I was thinking we would add an option in the accessibility mixin to mark something as dynamic/static, but then this feature would require additional sim code. Ideally, this would be done directly in the a11y-view template.

[terracoda]

@jessegreenberg, I was originally thinking we could use CSS for styling the a11y-view template. Perhaps just add a class of "static" or "dynamic" to the appropriate parent element. I haven't thought of a more generalized way yet, like automatically targeting elements and content features that are "static". This would be things like the scene summary opening paragraph, all labels, all headings, all interaction hints like "Grab balloon to play" or in the case of Ohm's Law, "Look for voltage and resistance sliders to play." Adding: On demand help-text is also static like and interaction hint.

Currently all dynamic description parameters are in an emphasis tag, but I don't think it is possible to easily target a parent element?

I see the entire chunk, not just the dynamic parameters as being the "dynamic description", so I would want to style more than just the parameters, but I would like to still make the parameters styled.

I chose the colors, blue, green and orange to align with some of the figures I have made, like this one:

Adding light diagram color codes for backgrounds:

• blue: hex:a0e1e7, green: hex:9adaa6, orange: hex:e5c45b
• Text can remain black for now.

[jessegreenberg]

Right, that is the trick - I am wondering how we can flag different elements as dynamic and static since all elements are rendered dynamically by Scenery.

[terracoda]

@jessegreenberg, if we add some semantically relevant global CSS classes in scenery, we could potential hook onto those. For example,

<p class="scene-summary-intro">...</p>
<p class="interaction-hint">...</p>
<p class="on-demand-help">...</p>

h1, h2, h3, h4, h5, h6, label, 
.scene-summary-intro, .interaction-hint, .on-demand-help {
design for static chunks 
}

And then a more general approach for dynamic descriptions.

I am just wondering if it would be more efficient to hook the dynamic descriptions with a CSS class or hook the static descriptions through structure and CSS classes.

[jessegreenberg]

Right, but how do we give those paragraph elements a class name? They don't exist until after the simulation has loaded. My concern is that this could require additional code in the simulation to give class names to the elements rendered in the PDOM.

[terracoda]

I understand your concern. It seems there would be extra code.

[terracoda]

@jessegreenberg, what all goes in the a11y-view template?

[jessegreenberg]

Here is the template: https://github.com/phetsims/chipper/blob/master/templates/sim-a11y-view.html

Some CSS but mostly JavaScript to create the HTML elements on the right.

[terracoda]

Thanks!

[jessegreenberg]

Another thought for an improvement: The aria-live elements in the copy change in height when their content is filled and removed. This makes the whole DOM hard to read when alerts come through. Maybe we can give these a min height so that this doesn't happen?

[jessegreenberg]

Went ahead and did this just to make development easier, but this can be changed later.

[terracoda]

And you could lighten up the colors, too:

• blue: "#a0e1e7"
• green: "#9adaa6"
• orange: "#e5c45b"

[jessegreenberg]

Sounds good. I don't see green currently, what is green?

[terracoda]

That's right. The green is for the dynamic descriptions, if we can figure out how to target them. In the short term, at least for Ohm's Law, styling the emphasis elements will snag the dynamic parameters if they are marked up with em elements.

em {
background-color: #9adaa6;
border-bottom: double 3px #000; /*or a border in dark green*/
}

[jessegreenberg]

Got it, thanks @terracoda, I committed your styling. Looks pretty cool in ohms-law.

[terracoda]

@jessegreenberg, when you have time, please publish a link for me ;-)

[zepumph]

@terracoda here is a recent one. What do you think?

http://www.colorado.edu/physics/phet/dev/html/ohms-law/1.4.0-dev.12/ohms-law-a11y-view.html

[jessegreenberg]

@zepumph it looks like the intro content at the top of the page is specific to ohms-law, would you mind changing it so that it the sim name from the title?

[zepumph]

Sure thing.

[terracoda]

@zepumph and @jessegreenberg, Looks great! Not sure if the emphasis element is used in different contexts in different sims. If it is an element that we can use consistantly for marking parameters, it would be really great.

In this sim, the highlighted green emphasis elements give a nice view of what content actually changes, making it very clear that this sim has a large amount of static content, with several embedded dynamic parameters.

Regarding actual style We need either a bit more line-height in general, and/or a little bottom padding on the list items. Either or both these style rules will prevent the overlapping of the parameters which makes the double-line bottom border disappear on some parameters.

Question: Is there a global font-size/ light-height definition for this template? And, if not, we could try that.

CSS3 has a newrem unit which means "root em." We might want to try that.

• 2015 CSS Tricks articlel/
• 2011 Snook article

[terracoda]

@zepumph, should I start a new issue for font-size?

Everything in the first design pass looks like it is implemented.

[zepumph]

I think we should start a design either in chipper (where the template lives) or in a11y-research to continue work on on the template. This issue has done well for us but is getting long.

[terracoda]

Thanks @zepumph, I think we can close this issue as all the initial design ideas have been implemented.