WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

From: Jesse Hausler
Date: Apr 25, 2014 12:06PM

For the landmark-ness of it? :)


On Fri, Apr 25, 2014 at 11:02 AM, Bryan Garaventa <
<EMAIL 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?
> :)
>
> -----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>
>
> > > >