WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Modal

for

From: Greg Kraus
Date: May 19, 2015 6:24AM

When I implemented the example you mentioned, I did choose the structure of

<div id="mainPage" aria-hidden="true"></div>
<div id="modal" role="dialog"></div>
<div id="modalOverlay" aria-hidden="false"></div>

intentionally so it would be much easier to manage the aria-hidden on
large portions of the page. Making the overlay a child of the main
section made it much more difficult to manage what all had aria-hidden
applied to it and what didn't.

Just a note, there is a bug in that version I have not addressed yet
regarding keyboard accessibility. In that version if you move the
keyboard focus to something like the address bar of the browser while
the modal is open, once you start tabbing through the page the
keyboard focus will jump to the div behind the modal. It's an easy
fix, so I should be able to update it soon. I'll try to get it all
updated by GAAD and send out a note about it.

Greg
--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
<EMAIL REMOVED>
http://go.ncsu.edu/itaccess


On Tue, May 19, 2015 at 8:15 AM, Jonathan Avila
< <EMAIL REMOVED> > wrote:
>> So is applying `aria-hidden="true"` to all the non-modal elements a good thing? Any feedback would be greatly appreciated.
>
> It is, but unfortunately you have to apply it to many of the other page elements. For example, say you want to insert the modal dialog inline within the page and have aria-hidden true on the dialog but have the aria-hidden false on the body of another ancestor element within the page. Currently this would not work -- that is nesting an aria-hidden false within an aria-hidden true does not expose the content within the aria-hidden false with current screen readers and browsers. In correctly placed or updated aria-hidden attributes can be very problematic to detect without user testing.
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
> Phone 703.637.8957
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>