No Focus and Blur events on iOS - workarounds?

Dear interest group members,
Our team at PhET Interactive Simulations works on description designs for making highly interactive science simulations (or sims) work nicely with the keyboard and screen reader software for people who prefer a described experience.

We have built a dynamic accessibility layer comprised entirely of semantic HTML to make our visual sims accessible. The visual sims are rendered entirely with graphics (canvas, SVG and or WebGL). The visual and accessible layers run in parallel to provide 2 simultaneous experiences one visual and one described depending on what technology the user is using to access the sim.

We have found that our accessible layer works very well for screen reader users using a keyboard on desktops and laptops.

We are currently working on making our accessibility layer work on mobile platforms using touch, and we have just learned that iOS has no cursor tracking and thus focus and blur events are not available to do any interesting content modifications in aria-valuetext or with aria live regions when the user’s focus lands on an interactive element or their focus leaves an interactive element.

We have already put in a feature request to Apple, and in addition, we would also like to reach out to the community about this issue. 

We are wondering if anyone else has encountered the limitation that mobile VoiceOver doesn't synchronize the cursor with keyboard focus, and if so is anyone aware of any clever workarounds?

For those who would like to read on for an example of dynamic aria-valuetext that relies on a blur event, here’s an example interaction for the simulation John Travoltage which is about static electricity. A link to the interactive sim is provided at the end of my email.

In John Travoltage, a user uses a slider to move John's hand closer or farther from the doorknob. The dynamic aria-valuetext gives the user a sense of progress rather than just straight descriptions of their current position. Here are three position descriptions that are contained in aria-valuetext:
On start up and when the user first puts focus on the Hand Position slider, the slider's aria-valuetext is “Position negative 4: Hand pointing at upper door, close to doorknob.”
Moving one step away from the doorknob the aria-valuetext changes to “Position negative 5: Away from doorknob.”
Then if the user changes directions and heads closer to the doorknob, the user gets, “Position negative 4: Towards doorknob,” instead of the original description for Position negative 4.
In addition, if they move their focus to the Leg Swing slider to rub John’s foot on the rug, a blur event returns the aria-valuetext for Position 4 back to the original description, so that when the user returns to the Hand to move it again they will get a description of where they are, rather than a stale description of where they were going the last time they were moving John’s hand.

Again, we would like to reach out to the community about this lack of focus and blur events on Mobile VoiceOver, and if people know of any work arounds?

We appreciate any thoughts about dynamic features of HTML and WAI-ARIA like aria-valuext and aria-live regions.

As promised, here’s a link to the sonified and accessible John Travoltage <https://phet.colorado.edu/en/simulation/john-travoltage> simulation.
Taliesin

~.~.~
Also reachable at Taliesin.Smith@colorado.edu
Inclusive Design Researcher
PhET Interactive Simulations
https://phet.colorado.edu/en/accessibility
Physics Department
University of Colorado, Boulder

Received on Friday, 26 April 2019 10:59:32 UTC