WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

From: Jesse Hausler
Date: Apr 25, 2014 1:09PM


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 REMOVED> > wrote:

> Yes, I'm aware of the back button, however, I thought your question was
> related to non-IOS deployment.
>
> -----Original Message-----
> From: Jesse Hausler [mailto: <EMAIL REMOVED> ]
> Sent: Friday, April 25, 2014 12:57 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Dialog semantics and aria?
>
> 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 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.
> >
> > -----Original Message-----
> > From: Jesse Hausler [mailto: <EMAIL REMOVED> ]
> > Sent: Friday, April 25, 2014 12:30 PM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] Dialog semantics and aria?
> >
> > 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 REMOVED>
> > >wrote:
> >
> > > 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>
> > >>
> > >
> > >
> > > > > > list messages to <EMAIL REMOVED>
> > > > > > list messages to <EMAIL REMOVED>
> >
> > > messages to <EMAIL REMOVED>
> > > >