RE: Role Application - is a parent containing element required?

My point of view and is coming from a non-technical side of things. If you have tested this with multiple screen readers and browsers, and find the solution works. Then you have answered your question. Don’t forget to test on mobile, windows, Mac and possibley even Linux (desktop os in that order). The key is the standards are a guide and testing is the proof of the pudding.

[https://www.cisco.com/c/dam/m/en_us/signaturetool/images/banners/standard/02_standard_ciscoblue02.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://www.cisco.com/assets/swa/img/thinkbeforeyouprint.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: Thursday, 6 September 2018 1:52 AM
To: w3c WAI List <w3c-wai-ig@w3.org>
Subject: Role Application - is a parent containing element required?

Hi Folks,
In the Using ARIA documentation (https://www.w3.org/TR/using-aria/#using-application), it says that the role="application" should be placed on the "closest containing element" of your widget or widgets.

I am specifically refering to the paragraph that says,
"Put it on the closest containing element of your widget, for example, the parent div of your element that is your outer most widget element. If that outer div wraps only widgets that need the application interaction model, this will make sure focus mode is switched off once the user tabs out of this widget."

My question is it ok to place it on the interactive element itself? Or will not having a parent div affect how screen reader software manages focus mode when the user tabs off of the widget?

Here’s a code snippet that is working nicely:
<div tabindex="0" id="283-347-553-367" aria-label="‪Chemistry book" role="application" aria-roledescription="move in four directions">‪Chemistry book</div>
<!-- On-demand help text -->
<p description-283-347-553-367>Use arrow keys, or letter keys W, A, S, or D to move book or zoomed-in book up, left, down, or right.</p>

Note that we added an explicit aria-label to get all screen readers to read out the name of the widget.

Or is mark-up with an actual explicit application parent better? And  if so, how do we get an accessible name description read out. Would it be something like this:

<div id="283-347-553-367" role="application">‪
               <div tabindex=“0" aria-roledescription="move in four directions">Chemistry book</div>
</div>

And I have a second question regarding multiple interactive widgets:
We actually have two interactive elements, a Chemistry book and a Zoomed-in Chemistry book, perhaps it would be better to have both interactive elements within the same div that has the role="application"? Currently, we are implementing them seperately, each with their own application role?

We are role=“application” for these interactive items because they can be dragged in 4 directions, and no native HTML elements or ARIA roles do that.

Any thoughts are much appreciated.
Taliesin Smith