WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS Modal Windows

for

From: Alastair Campbell
Date: Sep 20, 2013 3:39AM

I had a quick look at this last night, thinking it might be easy to work on
and improve, but there's an overhead of working out grunt and some other
dependancies I don't have time to get into right now.

Building on Paul's comments, they don't seem to have considered
accessibility beyond the non-JavaScript scenario (which, for most of us at
least, isn't really a disability issue). Including wai-arai attributes like
aria-hidden in the HTML is effectively hard-coding them, ARIA needs to be
dynamic.

If you wanted to do this as an accessible *and* progressively-enhanced
version you would need to take a different approach. Off the top of my head
you could either:

- Include the modal dialogue immediately after the link that opens it, and
then treat it like a show-hide widget enhanced to a lightbox. If JavaScript
isn't there, it should be open by default.
- Include the modal dialogue at the end of the page, and the link that
opens it is basically a within-page link that is then enhanced into a
lightbox style.

In both approaches you would want to use ARIA that is added by the
JavaScript. Alistair Duggin had a good slide on how accessibility and
progressive enhancement work together, slide 45 from here:
http://alistairduggin.co.uk/blog/presentation-olympics-accessibility-csun201/

For an accessible one, I'd look to the one mentioned already in this
thread, or the one from http://whatsock.com/tsg/ (e.g.
http://whatsock.com/tsg/Coding%20Arena/Modals/Modal%20(Internal%20Content%20Shell)/demo.htm
).

Hth,

-Alastair