Re: Valid usage of application mode

Hi Sean,
I agree that interactive simulations (and games) are unique user interfaces. However, PhET simulations (and many games) run in a browser these days. ARIA role application, thus allows web authors to design very custom interactions for very unique circumstances such as these. There are very few other reasons to actually use it.

The interesting thing about PhET Simulations is that their visual representation is completely inaccessible to AT (rendered solely with visual technologies such as canvas, SVG and/or webGL). As you likely know, these visual technologies are pretty much a black box to assistive technology (AT). It is through our Parallel DOM where we render the same sim in parallel (in native HTML) that we make the sim accessible to AT. Users of AT interact with the sim’s HTML in familiar ways much like they would interact with a typical web page.

ARIA role application allowed us to make one custom interaction (the balloon) while everything else in the sim is coded as native HTML elements and interactions.

When done right, ARIA role application can be very useful and powerful, and as others have written the use cases are few and far between, and web authors must be sure to implement it correctly and completely.

In fact, all complex widget interactions are tricky to implement. More examples of these complex interactions are greatly needed - whether part of a typical web page, or part of a specialized interface such as our interactive science simulations.

Taliesin


> On Jul 10, 2018, at 10:11 PM, Sean Murphy (seanmmur) <seanmmur@cisco.com> wrote:
> 
> Everyone,
>  
> Thank you for the responses to this question. In essence the valid usage that have been demonstrated in this thread are all very specialised user interfaces.
>  
>  
>  
> <image001.png>
> Sean Murphy
> SR ENGINEER.SOFTWARE ENGINEERING
> seanmmur@cisco.com <mailto:seanmmur@cisco.com>
> Tel: +61 2 8446 7751
>  
>  
>  
>  
> Cisco Systems, Inc.
> The Forum 201 Pacific Highway
> ST LEONARDS
> 2065
> Australia
> cisco.com <http://cisco.com/>
> <image002.gif>
> 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.
> Please click here <http://www.cisco.com/c/en/us/about/legal/terms-sale-software-license-agreement/company-registration-information.html> for Company Registration Information.
>  
>  
> From: Taliesin Smith <talilief@gmail.com> 
> Sent: Wednesday, 11 July 2018 5:58 AM
> To: Sean Murphy (seanmmur) <seanmmur@cisco.com>
> Subject: Re: Valid usage of application mode
>  
> Hi Sean,
> Steve’s section on application role in the Using ARIA document is spot-on, as you probably know. 
> When working on Balloons and Static Electricity we tried everything possible in HTML to create a 4-way draggable balloon, and found application role was the only thing that could do it.
>  
> Have you tried either of the simulations that I shared? I think they are very practical examples for when application role is required.
>  
> Taliesin
> 
> 
> On Jul 10, 2018, at 10:56 AM, Taliesin Smith <talilief@gmail.com <mailto:talilief@gmail.com>> wrote:
>  
> 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 <mailto: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 <mailto: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 <mailto:seanmmur@cisco.com>
> Tel: +61 2 8446 7751
> 
> Cisco Systems, Inc.
> The Forum 201 Pacific Highway
> ST LEONARDS
> 2065
> Australia
> cisco.com <http://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
>