WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dialog semantics and aria?

for

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


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