WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Greg Gamble
Date: May 19, 2015 2:51PM

As to tabbing out of a modals focus. What about capturing the last tab position on the modal then refocusing it back, on a blur event, to the first tab position?
Would this technique work on restricting a screen reader to the modal?

Greg


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Paul J. Adam
Sent: Tuesday, May 19, 2015 5:57 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Modal

Yes aria hidden is required on the main disabled content.

Also one thing I recently added to a newer modal dialog demo was making the main content's buttons disabled and links non-focusable (tabindex=-1). The problem is that if you only apply aria-hidden=true to the main content you are only disabling readability by a screen reader. A keyboard or SR user can still TAB around the buttons and links unless you explicitly disable that with JS also.

http://pauljadam.com/demos/dialog-DOM.html <http://pauljadam.com/demos/dialog-DOM.html>;

Paul J. Adam
Accessibility Evangelist
www.deque.com

Join us at our Mobile Accessibility "Bootcamp!"
August 6-7 in Austin Texas
https://dequeuniversity.com/events/2015/mobile
Topics include responsive web design, native apps, & more

> On May 19, 2015, at 6:26 AM, Chris Pearce < <EMAIL REMOVED> > wrote:
>
> Hi,
>
> I've used this implementation:
> http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3
> / for implementing an accessible modal in the past and has worked well
> (tested in VoiceOver, NVDA, and JAWS).
>
> I was advised by a colleague that it isn't necessary to apply
> `aria-hidden="true"` to the `div` element that contains all the
> non-modal elements, which in the example would be the 'mainPage' div.
> The reason for this is because if focus is trapped within the modal
> you can't access anything outside of it. I was also advised by someone
> else that you should have it as you can access headings outside of the
> modal via shortcut keys and possibly other things so applying
> `aria-hidden="true"` to all the non-modal elements just makes it
> pretty bullet-proof. My take is that it seems to work really well so why change it?
>
> So is applying `aria-hidden="true"` to all the non-modal elements a
> good thing? Any feedback would be greatly appreciated.
>
> Cheers,
> Chris
> > > archives at http://webaim.org/discussion/archives
>