WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

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

Ok, I just wanted to be clear on what you were saying. I assume that you can either hit a close button or press escape, correct?
-----Original Message-----
From: Jonathan Avila [mailto: <EMAIL REMOVED> ]
Sent: Tuesday, May 19, 2015 8:24 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Modal

> Are these traps "keyboard" traps? If so, you need to do what you can to keep that from happening.

Don, in this case the keyboard restriction is desirable. The user would still need to be able to close the dialog with the keyboard and return to normal keyboard navigation when the modal dialog is dismissed -- hence there is not a trap. This is equivalent to the same experience for a mouse user that is prohibited from accessing content outside the modal dialog.

Jonathan

--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
<EMAIL REMOVED>
Phone 703.637.8957
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Don Mauck
Sent: Tuesday, May 19, 2015 10:01 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Modal

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