E-mail List Archives
Re: Accessible Modal
From: Birkir R. Gunnarsson
Date: May 19, 2015 2:56PM
- Next message: Sean Curtis: "Re: Accessible Modal"
- Previous message: Jonathan Avila: "Re: Accessible Modal"
- Next message in Thread: Sean Curtis: "Re: Accessible Modal"
- Previous message in Thread: Jonathan Avila: "Re: Accessible Modal"
- View all messages in this Thread
No, it wouldn't.
The problem with the screen readers is that they render the document
content into its off-screen model, where the user can interact with it
just like a Word document on steroids.
You can restrict keyboard / focus behavior but you have to be able to
remove the background content from the off-screen modal in the screen
When you use display: none or visibility: hidden this is not a problem.
But when you use modals (create an overlay on-screen) it is hard to
replicate that behavior for a screen reader.
The only way to do this is to put the modal content into a seperate
container, put aria-hidden="true" on the entire background content,
and expose the modal content until user dismisses it.
Sailesh, I see what you are saying .. I just wish that this were
possible because sometimes it would be so much easier to implement
screen reader modal behavior if you could override aria-hidden="true"
by a child element.
I would also like to lose 40 pounds and win a million dollars.
Life is what it is.
On 5/19/15, Greg Gamble < <EMAIL REMOVED> > wrote:
> As to tabbing out of a modals focus. What about capturing the last tab
> position on the modal then refocusing it back, on a blur event, to the
> first tab position?
> Would this technique work on restricting a screen reader to the modal?
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Paul J. Adam
> Sent: Tuesday, May 19, 2015 5:57 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Accessible Modal
> Yes aria hidden is required on the main disabled content.
> Also one thing I recently added to a newer modal dialog demo was making the
> main content's buttons disabled and links non-focusable (tabindex=-1). The
> problem is that if you only apply aria-hidden=true to the main content you
> are only disabling readability by a screen reader. A keyboard or SR user can
> still TAB around the buttons and links unless you explicitly disable that
> with JS also.
> Paul J. Adam
> Accessibility Evangelist
> Join us at our Mobile Accessibility "Bootcamp!"
> August 6-7 in Austin Texas
> Topics include responsive web design, native apps, & more
>> On May 19, 2015, at 6:26 AM, Chris Pearce < <EMAIL REMOVED> > wrote:
>> I've used this implementation:
>> / 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.
>> >> >> archives at http://webaim.org/discussion/archives
> > > http://webaim.org/discussion/archives
> > > > > >
Work hard. Have fun. Make history.