WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

From: Jesse Hausler
Date: Apr 25, 2014 11:55AM

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.
>
>