WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Paul J. Adam
Date: May 19, 2015 6:56AM

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