Re: Valid usage of application mode

Hi Sean,
This is a great question and one we struggled with a lot when we embarked on making our interactive science simulations accessible to students with disabilities.

We use the application role sparingly for creating custom interactions that have no native HTML equivalent. For example, there is no native 4-way drag in HTML, so we use role=“application” to create one. We then provide instructions as implicitly as possible to the user in the design of the simulation on how to operate this custom object. Users often do not know intuitively how to interact with something identified as an “application” or “web application" whereas they do know what to do with things called “checkbox" or “button”.

We have two examples of simulations with this custom 4-way drag, Balloons and Static Electricity and Friction.

We have just published a fully accessible, Balloons and Static Electricity <https://phet.colorado.edu/en/simulation/balloons-and-static-electricity>. To experience the simulation’s accessibility layer, you must use the keyboard, or the keyboard with a screen reader. We use the application role to make the balloon freely draggable in 4 directions and freely droppable anywhere.

As background I’ll add that it took a lot of research and trial and error to get this interaction to work well for users across diverse platforms (browsers and screen readers). The balloon as a custom interaction with role=“application" right now is working well for keyboard users and screen reader users.

I’ll also note that a native button launches the custom 4-way drag in this simulation. Initially without the native grab button, screen reader users had trouble interacting with the balloon (grabbing and moving it). With the grab button added, screen reader users found the interaction much more intuitive, but visual keyboard users had trouble grabbing the balloon. We added visual cues to support visual keyboard users and feel we have found an interaction that works well for these two groups.

Things have changed a lot for the application role since our first studies with screen reader users (2015-2016), and since then we have published the 4-way drag interaction without the native grab button in the simulation Friction <https://phet.colorado.edu/en/simulation/friction>. Note that Friction is keyboard accessible, but not yet fully described, meaning it is not fully screen reader accessible.

I hope you find these examples of application role useful. I’m looking forward to better support for, “aria-roledescription” to hep describe these custom interactions more clearly to users.

For more information on accessibility and more examples of the simulations we are working on please see our website, https://phet.colorado.edu/en/accessibility/prototypes <https://phet.colorado.edu/en/accessibility/prototypes>.

Taliesin

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


> On Jul 10, 2018, at 5:49 AM, Sean Murphy (seanmmur) <seanmmur@cisco.com> wrote:
> 
> All,
> 
> I'm very interested in finding out people's opinions on when or when role equals quote application quote should be used. What examples of webpages this is a valid usage or areas of the web UI.
> 
> As I'm finding more and more webpages are using application role incorrectly. For example people using application in dialogues, forms, ETC.
> 
> 
> 
> Sean M thisurphy
> SR ENGINEER.SOFTWARE ENGINEERING
> seanmmur@cisco.com
> Tel: +61 2 8446 7751
> 
> Cisco Systems, Inc.
> The Forum 201 Pacific Highway
> ST LEONARDS
> 2065
> Australia
> cisco.com
> 
> Think before you print.
> This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.
> http://www.cisco.com/c/en/us/about/legal/terms-sale-software-license-agreement/company-registration-information.html
> 
>