WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

From: Bryan Garaventa
Date: Apr 25, 2014 12:02PM

>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?
:)

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
Sent: Friday, April 25, 2014 10:55 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Dialog semantics and aria?

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 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.
>
> -----Original Message-----
> From: <EMAIL REMOVED>
> [mailto: <EMAIL REMOVED> ] On Behalf Of Jesse
> Hausler
> Sent: Friday, April 25, 2014 10:06 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] Dialog semantics and aria?
>
> 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
> > > list messages to <EMAIL REMOVED>
>
> > > list messages to <EMAIL REMOVED>
>
messages to <EMAIL REMOVED>