Feature requests and changes

[terracoda]

Some Issues from Interviews 3 and 4:

• Remove/hide Charge Setting Radios for now.
• Changes to P-DOM. Scene Summary should be moved to main region, and have an h2. The h1 in the header element now change to be the same as the sim/page title: Balloons and Static Electricity.
• Remove aria-describedby attributes on Wall button, Sim Reset button and Balloons A-B switch. Leave the description on the Balloon Reset button for now.
• When A-B switch is changed, do not read out the balloon's description and navigation cue. Just say, "Green balloon added to Play Area" or "Green balloon removed from Play Area."
• Please change the text of the Scene Summary description, details of changing parts are in google sheet. Now on page load the scene summary would be: This simulation contains a Play Area and a Control Panel. The Play Area is a room. It has a balloon, a sweater and a wall. The Control Panel allows you to add a balloon, remove wall and reset entire experiment. Currently, sweater and wall have many pairs of negative and positive charges, the balloon, just a few. Balloon is in middle of Play Area, evenly between sweater and wall.
  Tab to navigate to next object. Press question mark for keyboard commands and help.
• New content for Keyboard Commands and Help dialog in issue Add invisible 'keyboard help' prototype to accessibility tree #105
• New navigation cue for WASD keys. Use WASD keys to grab and drag balloon up, left, down and right.

[terracoda]

@jessegreenberg, does #120 make sense? I don't know how to label it as an a11y issue.

[jessegreenberg]

Thanks @terracoda, this all makes sense. I will work on all of this before the next dev version. Just to double check on the changes regarding the main region and header,

The current header looks like this:

<header role="banner" aria-labelledby="scene-label-14-35" aria-describedby="scene-descripion-14-35">
            <h1 id="scene-label-14-35">‪The scene for Balloons and Static Electricity‬</h1>
            <div id="scene-descripion-14-35">
                <p>‪A balloon floats evenly between a large woolly sweater and a removable wall. The sweater is to the left and the wall is to the right.  Each object shows negative and positive charges. Charges are shown in pairs. Currently, the sweater and the wall have many pairs of charges, the balloon, just a few. The control panel has controls to add a second balloon, adjust charge views and to reset the entire experiment. Select Tab for next item. Select K or question mark for keyboard help. Select H for a heading outline.‬</p>
            </div>
</header>

If I understand correctly, it should look something like this:

<header role="banner" aria-labelledby="scene-label-14-35" aria-describedby="scene-descripion-14-35">
            <h1 id="scene-label-14-35">‪Balloons and Static Electricity</h1>
</header>
<div class="ScreenViewContainer" role="main">
  <div id="scene-description-id">
    <h2 id='scene-description-label-id'>The scene for Balloons and Static Electricity</h2>
    <p>This simulation contains a Play Area and a Control Panel. The Play Area is a room. It has a balloon, a sweater and a wall. The Control Panel allows you to add a balloon, remove the wall and reset the entire experiment. Currently, the sweater and wall have many pairs of charges, the balloon, just a few. Balloon is in middle of Play Area, evenly placed between sweater and wall. Tab to navigate between objects. Press question mark for keyboard commands and help.</p>
  </div>
  <section id="play-area-14-35-37" aria-labelledby="heading-node-36">
        ....
  </section>
  <section id="control-panel-14-35-58" aria-labelledby="heading-node-xx">
        .........
  </section>

Is this structure change correct?

[jessegreenberg]

In addition to the above feature list, I would like to investigate another issue

• Balloon cannot be dragged after being released. User must navigate away from balloon after releasing to pick it up again. (reported with JAWS14 + Firefox, Windows 7)

[terracoda]

@jessegreenberg regarding structure, we won't need an aria-describedby attribute any more for the header since there is only an h1 in it. Also, since the Page Title already has the sim title, the aria-labeledby may be unnecessary. We may be able to reduce verbosity by not including it. This is a hunch.
The actual Scene Summary container should be a section, same as the Play Area and Control Panel. And is it possible to use the main element instead of a div? The main element is not recognized by all browsers, but it is interpreted as a div in those cases. Best to keep the explicit role="main" in case the element is not recognized.
New code would look like this:

<header role="banner">
  <h1 id="scene-label-14-35">‪Balloons and Static Electricity</h1>
</header>
<main class="ScreenViewContainer" role="main">
  <section id="scene-description-id">
    <h2 id='scene-description-label-id'>Scene Summary</h2>
    <p>This simulation contains a Play Area and a Control Panel. The Play Area is a room. It has a balloon, a sweater and a wall. The Control Panel allows you to add a balloon, remove the wall and reset the entire experiment. Currently, the sweater and wall have many pairs of charges, the balloon, just a few. Balloon is in middle of Play Area, evenly placed between sweater and wall. Tab to navigate between objects. Press question mark for keyboard commands and help.</p>
  </section>
  <section id="play-area-14-35-37" aria-labelledby="heading-node-36">
        ....
  </section>
  <section id="control-panel-14-35-58" aria-labelledby="heading-node-xx">
        .........
  </section>
</main>

[terracoda]

@jessegreenberg if I find (or remember) more items, should I create new issues or add to the check list?

[terracoda]

@jessegreenberg thanks for adding the issue from the testing document 'A11y Balloons: Testing Inst. 9'.

[terracoda]

@jessegreenberg I realize now, you won't be able to check off the issues list. I will changed my check boxes to a normal list. I suppose you'll have to make a checkbox comment to which you have access.

[terracoda]

@jessegreenberg I'm working in the google sheet BASE Labels & Descriptions. I'll try to keep an eye this issue page in case you have questions.

[jessegreenberg]

@terracoda, thank you for clarifying, and pasting an example of the html. I like the idea of the description being in its own section.

I had initially avoided using the main element for the screen view because we will eventually have sims with multiple screen views, and therefore multiple main elements, which is not valid html. But I just found this statement from W3:

Note: Because document and application elements can be nested in the DOM, they may have multiple main elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

I will change the div to a main.

[jessegreenberg]

@terracoda, this seems like a good place to document changes for the next dev version. Please add any new change items to the list in this issue.

[jessegreenberg]

I changed the issue list to a checkbox list, just so that it is easier to track the status of this issue. Hope that is OK!

[jessegreenberg]

• Balloon radio buttons should be replaced with an ABSwitch #112 is part of this change list.

[terracoda]

@jessegreenberg Re checkbox list - Awesome. I didn't realize you would have access to check things off. That's perfect. I will add issues to list above as I come across them.

[terracoda]

@jessegreenberg In the Scene Summary description above in the issue list, I put double square brackets around content that is dynamic. Hopefully, these strings will fit perfectly with the other strings, so things stay grammatical as they update (eventually update). I might have to tweak the sentences, so we can reduce the number of custom strings.

[jessegreenberg]

New navigation cue for WASD keys. Use WASD keys to grab and drag balloon up, left, down and right.

@terracoda, where should this description be located? Is this part of the balloon description?

[terracoda]

@jessegreenberg Yes, the WASD key navigation cue is read out at the end of the balloon description, upon focus. Sorry the full navigation cue is Use WASD keys to grab and drag balloon up, left, down and right. Tab for next object. Press question mark for keyboard commands and help.

[jessegreenberg]

Description for the scene summary has been changed, but it is not dynamic yet. Making it dynamic will take a fair amount of time and further discussion.

[jessegreenberg]

Ok, thanks @terracoda. I updated the navigation cue for the balloon.

[jessegreenberg]

New dev version deployed:

http://www.colorado.edu/physics/phet/dev/html/balloons-and-static-electricity/1.2.0-accessible-instance.10/balloons-and-static-electricity_en.html?accessibility

The aria-live update for the ABSwitch only seems to work for NVDA + Firefox and JAWS + IE. Other browsers do not receive any dynamic description for these.

[jessegreenberg]

Balloon cannot be dragged after being released. User must navigate away from balloon after releasing to pick it up again. (reported with JAWS14 + Firefox, Windows 7)

I was not able to reproduce this with JAWS 17. We will have to keep watching for this issue.

[terracoda]

@jessegreenberg, ok, I will test new sim on my available systems tomorrow.

[jessegreenberg]

Since all items have been addressed, closing this issue. New items will be added to new issues or version reviews.

[terracoda]

@jessegreenberg thanks :-)