WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Karl Groves
Date: May 19, 2015 5:52AM

"So is applying `aria-hidden="true"` to all the non-modal elements a good
thing?"

Yes. Otherwise the controls in the "parent" will be reachable by
screen reader users. For instance, without aria-hidden="true" a JAWS
user could pull up a list of form fields, buttons, links, etc. that
include those outside the modal.

On Tue, May 19, 2015 at 7: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
> > > > --

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829

Modern Web Toolsets and Accessibility
https://www.youtube.com/watch?v=_uq6Db47-Ks

www.tenon.io