WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Birkir R. Gunnarsson
Date: May 19, 2015 12:29PM

You should always have a close button .. if you want touch-screen
device users to interact with your content. They certainly do not have
access to the escape key (or the any key for that metter :) ).


On 5/19/15, Don Mauck < <EMAIL REMOVED> > wrote:
> Well, all you really need is an easily defined close button.
> -----Original Message-----
> From: Jonathan Avila [mailto: <EMAIL REMOVED> ]
> Sent: Tuesday, May 19, 2015 8:36 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Accessible Modal
>
>> 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?
>
> Yes, although there can be challenges just relying on escape as it may not
> be apparent to some users and it's behavior may depend on the AT being used.
>
> 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:34 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Accessible Modal
>
> 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
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > > > > > >


--
Work hard. Have fun. Make history.