WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Birkir R. Gunnarsson
Date: May 19, 2015 6:04AM

Absolutely. A screen reader user can also navigate to the "hidden"
content simply using the arrow keys, or the touch-screen in Voiceover.
It is near impossible to make a modal window experience for a screen
reader user unless you use aria-hidden as described.
For keyboard only user, yes, you can trap the keyboard focus within the modal.
For the mouse user you can either ignore any clicks outside the modal,
or cause the modal to close when user clicks outside it.
But you got to trick the good ol screen reader.



On 5/19/15, Karl Groves < <EMAIL REMOVED> > wrote:
> "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
> > > > >


--
Work hard. Have fun. Make history.