W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 2018

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

From: Bryan Garaventa <bryan.garaventa@levelaccess.com>
Date: Fri, 7 Sep 2018 20:01:37 +0000
To: "Cohn, Jonathan" <jcohn@air.org>, Taliesin Smith <talilief@gmail.com>, w3c WAI List <w3c-wai-ig@w3.org>
Message-ID: <BN7PR03MB3650D2B40C6663F3B47640B4F2000@BN7PR03MB3650.namprd03.prod.outlook.com>
I think that it may be, the state is set to Resolved, though I don’t have a test device to try this.

The relevant issue is documented here

Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
415.624.2709 (o)

From: Cohn, Jonathan <jcohn@air.org>
Sent: Friday, September 07, 2018 12:11 PM
To: Bryan Garaventa <bryan.garaventa@levelaccess.com>; Taliesin Smith <talilief@gmail.com>; w3c WAI List <w3c-wai-ig@w3.org>
Subject: Re: Role Application - is a parent containing element required?


I remember there being issues with one screen reader and active-activedescendant any idea if this issue is resolved in their current public betas?

Take care,

Jonathan Cohn

From: Bryan Garaventa <bryan.garaventa@levelaccess.com<mailto:bryan.garaventa@levelaccess.com>>
Date: Friday, September 7, 2018 at 3:05 PM
To: Taliesin Smith <talilief@gmail.com<mailto:talilief@gmail.com>>, w3c WAI List <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: RE: Role Application - is a parent containing element required?
Resent-From: <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Resent-Date: Friday, September 7, 2018 at 3:00 PM

This particular markup should be fine, since the application role does support focusability in addition to aria-activedescendant to simulate internal focus when needed.

I don’t recommend combining multiple interactive widgets within each other however, because the more you complicate the user interactions the more likely it is that end users will not be able to correctly understand what is required to use them.

Going back to your general question about role=application on interactive widgets, this is only allowed when the focusable element does not have its own native role, such as on a div or span that has no native semantics.

If, however, role=application is applied to native interactive elements like buttons, links, and editable or selectable form fields, then this will cause critical accessibility issues and will likely break the widget for end users because the explicit role will destroy the native mapping for that control in the accessibility tree.

Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
415.624.2709 (o)

From: Taliesin Smith <talilief@gmail.com<mailto:talilief@gmail.com>>
Sent: Wednesday, September 05, 2018 8:52 AM
To: w3c WAI List <w3c-wai-ig@w3.org<mailto: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>

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

Received on Friday, 7 September 2018 20:02:01 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:37:21 UTC