WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Modal

for

From: Chris Pearce
Date: May 19, 2015 5:26AM

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