'Heart Beat' div should be hidden from screen readers

[jessegreenberg]

In #140, a 'heartBeat' div was introduced to Sim.js to keep the sim awake for Mac OS with Safari. The div contains a random number that changes every thirty seconds or so.

The div can be found by screen readers so that when the AT reads through the document, the last thing it reads is the random heart beat value. The user can also find the number with the virtual cursor.

The hidden attribute could be used to hide the div from the screen reader. Another possibility is the aria-hidden attribute. The div would look like:

<div hidden class="heartBeat" style="opacity: 0; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; clip: rect(0px 0px 0px 0px);">0.5295263077132404</div>

These attributes might hide the heart beat from the browser and remove functionality of the div.

Assigning to @jessegreenberg to test and implement.

[jessegreenberg]

Looking over #140, I can not reproduce the 'unresponsive sim' issue with Mac OS Safari 9.0.2 when the heartbeat div is removed.

[jessegreenberg]

'aria-hidden' successfully hides the div from NVDA.

[jessegreenberg]

It may be best to hide the entire 'sim' div from the screen reader. A new issue came up where some of the visual text can be found by screen readers. Something like this might work:

• Add 'aria-hidden'=true to the 'sim' div to hide extraneous content associated visual elements.
• Add 'aria-hidden'=true to the heartbeat div since it is outside of the sim div.
• Move the parallel DOM out of the 'sim' div and directly into the HTML body.

[jessegreenberg]

This in combination with the change in phetsims/scenery#504 seems to work very nicely with NVDA + Chrome/Firefox.

Ran through test-server, no issues related to the change.

[jessegreenberg]

This was completed,aria-hidden is sufficient to hide the heartbeat div from the screen reader. Closing.