WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Don Mauck
Date: May 19, 2015 8:00AM

Are these traps "keyboard" traps? If so, you need to do what you can to keep that from happening.
-----Original Message-----
From: Chris Pearce [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, May 19, 2015 5:26 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Accessible Modal

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