WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Dialog semantics and aria?

for

Number of posts in this thread: 19 (In chronological order)

From: Jesse Hausler
Date: Fri, Apr 25 2014 11:05AM
Subject: Dialog semantics and aria?
No previous message | Next message →

Just looking to verify that these are good semantics and aria for a dialog
component.

<div role="dialog" aria-labelledby="modal-title" tabindex="0">

<span class="assistiveText">Start Dialog</span>

<button>

X <!--- or equivalent icon font --->

<span class="assistiveText">Close Dialog</span>

</button>

<h2 id="modal-title"> <!--- Title of Modal goes here---> </h2>

<div role="document">

<!--- contents of modal goes here--->

</div>
</div>

Would you add aria-live to the outer div?
Would a <section> be better than <div> for outer element?

I sometimes wish the WAI Aria Authoring practices guide would just include
recommended semantics for their widgets, as opposed to giving links to
differing examples.

Thanks,
Jesse

From: Bryan Garaventa
Date: Fri, Apr 25 2014 11:24AM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

I'd recommend the following instead.

<div role="region" aria-labelledby="modal-title" tabindex="-1">

<button>
<span aria-hidden="true">
X <!--- or equivalent icon font --->
</span>
<span class="assistiveText">Close Dialog</span>
</button>

<h2 id="modal-title"> <!--- Title of Modal goes here---> </h2>

<div>

<!--- contents of modal goes here--->

</div>
</div>

I assume tabindex=0 was set so you could set focus to the modal when
rendered, but this shouldn't be in the tab order, so -1 should be set
instead.

I don't recommend role=dialog due to the keyboard interaction differences
enforced by some screen readers, and adding it doesn't actually increase
accessibility for screen readers in any way. The region role is a good
compromise because it provides beginning and ending boundary feedback with a
defined label.

>Would you add aria-live to the outer div?

It probably wouldn't do anything unless you were writing the content into
the div after rendering it using innerHTML anyway.

>Would a <section> be better than <div> for outer element?

Not better or worse that I'm aware of, just different, so it's worth playing
with.

From: Jesse Hausler
Date: Fri, Apr 25 2014 11:55AM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Thanks for your feedback Bryan.

I'm not sure where I saw the tabindex=0. I agree with you that it should
likely be -1.

I got a tip from some folks at CSUN to embed a div with role="document" to
address the issue with screen readers and application mode that you
mention. Have you found luck with that method?

Jesse


On Fri, Apr 25, 2014 at 10:24 AM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> I'd recommend the following instead.
>
> <div role="region" aria-labelledby="modal-title" tabindex="-1">
>
> <button>
> <span aria-hidden="true">
> X <!--- or equivalent icon font --->
> </span>
> <span class="assistiveText">Close Dialog</span>
> </button>
>
> <h2 id="modal-title"> <!--- Title of Modal goes here---> </h2>
>
> <div>
>
> <!--- contents of modal goes here--->
>
> </div>
> </div>
>
> I assume tabindex=0 was set so you could set focus to the modal when
> rendered, but this shouldn't be in the tab order, so -1 should be set
> instead.
>
> I don't recommend role=dialog due to the keyboard interaction differences
> enforced by some screen readers, and adding it doesn't actually increase
> accessibility for screen readers in any way. The region role is a good
> compromise because it provides beginning and ending boundary feedback with
> a
> defined label.
>
> >Would you add aria-live to the outer div?
>
> It probably wouldn't do anything unless you were writing the content into
> the div after rendering it using innerHTML anyway.
>
> >Would a <section> be better than <div> for outer element?
>
> Not better or worse that I'm aware of, just different, so it's worth
> playing
> with.
>
>

From: Bryan Garaventa
Date: Fri, Apr 25 2014 12:02PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

>I got a tip from some folks at CSUN to embed a div with role="document" to
address the issue with screen readers and application mode that you mention.
Have you found luck with that method?

It's true that the document role negates applications mode, but it then begs
the question, why use the dialog role if you are only then negating it?
:)

From: Jesse Hausler
Date: Fri, Apr 25 2014 12:06PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

For the landmark-ness of it? :)


On Fri, Apr 25, 2014 at 11:02 AM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> >I got a tip from some folks at CSUN to embed a div with role="document" to
> address the issue with screen readers and application mode that you
> mention.
> Have you found luck with that method?
>
> It's true that the document role negates applications mode, but it then
> begs
> the question, why use the dialog role if you are only then negating it?
> :)
>
>

From: Jesse Hausler
Date: Fri, Apr 25 2014 12:29PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

With regards to accessible semantics and aria, would you consider a panel
that pops up and fills the entire screen, with say a form.. the same as a
modal overlay? Once the panel is closed, focus goes back to the trigger
page.

We do this quite a bit for mobile apps. I see them as the same, but would
like to hear other opinions.

Jesse




On Fri, Apr 25, 2014 at 11:06 AM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >wrote:

> For the landmark-ness of it? :)
>
>
> On Fri, Apr 25, 2014 at 11:02 AM, Bryan Garaventa <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> >I got a tip from some folks at CSUN to embed a div with role="document"
>> to
>> address the issue with screen readers and application mode that you
>> mention.
>> Have you found luck with that method?
>>
>> It's true that the document role negates applications mode, but it then
>> begs
>> the question, why use the dialog role if you are only then negating it?
>> :)
>>
>>

From: Greg Kraus
Date: Fri, Apr 25 2014 12:33PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

The problem with role="dialog" and role="document" has to do with the
difference in how certain screen readers handle application mode.
Namely, older versions of NVDA would not let you use the virtual
cursor at all in role="dialog". In that case it became necessary to
also use role="document" to allow NVDA users to use their virtual
cursor. The latest version of NVDA (2014.1) does not have this
problem.

You can read about the situation here.

http://accessibility.oit.ncsu.edu/blog/2014/01/02/incredible-accessible-modal-window-version-2/

Greg
--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
= EMAIL ADDRESS REMOVED =
http://go.ncsu.edu/itaccess

On Fri, Apr 25, 2014 at 2:29 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> With regards to accessible semantics and aria, would you consider a panel
> that pops up and fills the entire screen, with say a form.. the same as a
> modal overlay? Once the panel is closed, focus goes back to the trigger
> page.
>
> We do this quite a bit for mobile apps. I see them as the same, but would
> like to hear other opinions.
>
> Jesse
>
>
>
>
> On Fri, Apr 25, 2014 at 11:06 AM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >wrote:
>
>> For the landmark-ness of it? :)
>>
>>
>> On Fri, Apr 25, 2014 at 11:02 AM, Bryan Garaventa <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> >I got a tip from some folks at CSUN to embed a div with role="document"
>>> to
>>> address the issue with screen readers and application mode that you
>>> mention.
>>> Have you found luck with that method?
>>>
>>> It's true that the document role negates applications mode, but it then
>>> begs
>>> the question, why use the dialog role if you are only then negating it?
>>> :)
>>>
>>>

From: Don Mauck
Date: Fri, Apr 25 2014 12:34PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

I've no problem with that as long as there was an easy way to leave the panel. Not only a close button but the escape key should close the panel as well.

From: Bryan Garaventa
Date: Fri, Apr 25 2014 12:48PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Ah, dialog is not a landmark though, see
http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_
page
Though it's not listed, region is treated as one however.

From: Bryan Garaventa
Date: Fri, Apr 25 2014 12:49PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Yes, if it obscures background content which is disabled or made so it could
not be interacted with, it would be a modal.


From: Bryan Garaventa
Date: Fri, Apr 25 2014 12:56PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

True, there are some other considerations to keep in mind as well though.

If you use role=dialog or role=alertdialog or role=application, any content
marked up as such will only appear on one line in the main document within
Browse Mode when using NVDA, which may not be desirable in all cases as a
general practice for providing easily readable content.

E.G You arrow down, and you hear "application", arrow down again, and you
are past the application region. You have to press enter on it to access the
content within the application region if you want to read its content. This
also means you can't quickly jump to form fields that are included within
such regions, because the quick navigation keys don't work. The same
behavior is true for the roles dialog and alertdialog, which then requires
careful focus handling to manage correctly as a result.



From: Jesse Hausler
Date: Fri, Apr 25 2014 12:56PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Don,
Yes, escape always closes the panel on a desktop browser. In mobile cases,
there isn't so much of an escape key as there is the usual back button in
the top left.

Greg,
Are you suggesting that role=document is no longer needed (or as Bryan
suggests, avoiding use of role=dialog)?

Thanks,
Jesse


On Fri, Apr 25, 2014 at 11:34 AM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:

> I've no problem with that as long as there was an easy way to leave the
> panel. Not only a close button but the escape key should close the panel
> as well.
>
>

From: Don Mauck
Date: Fri, Apr 25 2014 1:02PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Yes, I'm aware of the back button, however, I thought your question was related to non-IOS deployment.

From: Greg Kraus
Date: Fri, Apr 25 2014 1:05PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

The reason role="document" was introduced in this scenario was to
allow NVDA users the ability to browse the entirety of the
role="dialog". With the latest version of NVDA this is a non-issue
now, so my initial thought is that role="document" is not needed any
more.

Greg

On Fri, Apr 25, 2014 at 3:02 PM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> Yes, I'm aware of the back button, however, I thought your question was related to non-IOS deployment.
>
>

From: Jesse Hausler
Date: Fri, Apr 25 2014 1:09PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

No problem. The goal is for the same component to be available for both
mobile and desktop situations. So while we'll have the code in there for
esc to close for desktop situations...on mobile, we'll have to check to see
if pressing the esc key on a connected keyboard will close the dialog as
expected.

Thanks again for your input.

Jesse


On Fri, Apr 25, 2014 at 12:02 PM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:

> Yes, I'm aware of the back button, however, I thought your question was
> related to non-IOS deployment.
>
>

From: Ravindra Kumar Jain
Date: Mon, Apr 28 2014 3:12AM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Hi List,

I see that this particular thread is talking about " Dialog Semantics
" and the solution that is coming out is that of inserting
"role="region"". I am sorry to disagree with the solution given by
Bryan . You see , as far as making modal windows accessible is
concerned Something similar issue came in one of the projects I've
handled. first of all , I've tested what the solution you've given
by inserting code using firebug , and let me tell you that
role="region" is working quite well with JAWS in both firefox / IE,
to that extent it is getting recognized as a landmark , which in my
opinion is not a good idea as far as WAI-ARIA landmark page role
taxonomy is concerned, since if role="region" is supposed to be a
landmark , then why is not recognized as such in w3c documents ?

My Second point is that role ="region" is simply overlooked by NVDA.
So, should we totally overlook Open Source products while suggesting
accessibility solutions to the developers or wait till eternity. Will
Open Source Products catch up fast ?

I guess this is just one instance of discrepancy among the people in
the field of accessibility. Only thing which seems to be common is
we all agree to disagree.

This I guess , is a sorry state of affairs. This is how I will
describe the situation.

<blockquote> Instead of crossing the ocean of Inaccessibility by
travelling in a huge ship of Accessibility under the strong
leadership of W3C, different User Agent Vendors , Corporations ,
Companies manufacturing Assistive Technologies like Screen Reders
etc. are travelling in their own small small boats. You can imagine
and smile at what is bound to happen. Will their be a day when
people industry wide are going to agree and collaborate on atleast
one thing and that is "Accessibility" ? </blockquote>

I think Mr. Tim Berners Lee will be more than happy that day.

Thanks ,

Ravindra Kumar Jain
Accessibility Engineer
http://www.onyadigital.com

From: Bryan Garaventa
Date: Mon, Apr 28 2014 8:42AM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

No worries, I didn't say that role=dialog should never be used, just that
there are keyboard interaction and feedback differences to be aware of,
since this often catches screen reader users off guard.

I recommended role=region because it is supposed to provide beginning and
ending boundary text information feedback for screen reader users, though I
agree, this currently isn't working for NVDA, which there is an open bug
about.

Regardless whether you use either method, it's the content that needs to be
accessible, and the method of rendering that is important here, so when the
dialog is rendered, the background content should be hidden properly, focus
should be set appropriately for keyboard users, the content must all be
accessible in an intuitive manner, the dialog must be closable from the
keyboard, and focus should return to the triggering element after it closes
if a triggering element is present.

The rest is just semantics.

From: Jesse Hausler
Date: Tue, Apr 29 2014 3:16PM
Subject: Re: Dialog semantics and aria?
← Previous message | Next message →

Thanks everyone for this helpful discussion.

Any thoughts on why the ARIA Authoring practices guide suggests tabindex=0
on the document content area of an alertdialog? If there is nothing to
interact with, why set tabindex to 0?

http://www.w3.org/TR/wai-aria-practices/#alertdialog

It's in the WAI-ARIA Roles, States, and Properties cell.

Thanks again,
Jesse


On Mon, Apr 28, 2014 at 7:42 AM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:

> No worries, I didn't say that role=dialog should never be used, just that
> there are keyboard interaction and feedback differences to be aware of,
> since this often catches screen reader users off guard.
>
> I recommended role=region because it is supposed to provide beginning and
> ending boundary text information feedback for screen reader users, though I
> agree, this currently isn't working for NVDA, which there is an open bug
> about.
>
> Regardless whether you use either method, it's the content that needs to be
> accessible, and the method of rendering that is important here, so when the
> dialog is rendered, the background content should be hidden properly, focus
> should be set appropriately for keyboard users, the content must all be
> accessible in an intuitive manner, the dialog must be closable from the
> keyboard, and focus should return to the triggering element after it closes
> if a triggering element is present.
>
> The rest is just semantics.
>
>

From: Bryan Garaventa
Date: Wed, Apr 30 2014 9:19AM
Subject: Re: Dialog semantics and aria?
← Previous message | No next message

This question would probably be good to ask on the public WAI list, since it
relates to W3C documentation. I suspect the tabindex=0 scenario was added to
account for a dialog that has no other active elements within it, but this
shouldn't be the case in practice for any situation I can think of.