WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: CSS Modal Windows

for

Number of posts in this thread: 7 (In chronological order)

From: Jan Heck
Date: Thu, Sep 19 2013 10:54AM
Subject: CSS Modal Windows
No previous message | Next message →

Is anyone familiar with CSS Modal (http://drublic.github.io/css-modal/)
and if so, is it truly accessible as it claims to be?

Thanks,
Jan

From: Paul J. Adam
Date: Thu, Sep 19 2013 11:04AM
Subject: Re: CSS Modal Windows
← Previous message | Next message →

No it's not accessible.

<section class="semantic-content" id="modal-text" tabindex="-1"
role="dialog" aria-labelledby="modal-label" aria-hidden="true">

<div class="modal-inner">
<header id="modal-label"><!-- Header --></header>
<div class="modal-content"><!-- The modals content --></div>
<footer><!-- Footer --></footer>
</div>

<a href="#!" class="modal-close" title="Close this modal" data-close="Close"
data-dismiss="modal">×</a>
</section>

Why the heck do they use aria-hidden=true on the modal?

They don't appear to handle focus management and their close button needs an aria-label. The modals are at the bottom of the DOM.

I think they're misunderstanding the term "accessible" maybe they're assuming that since the "JavaScript is only for sugar. This makes them perfectly accessible." which is an incorrect assumption. I guess they're thinking since it works without JavaScript it's automatically accessible which is a myth.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Sep 19, 2013, at 11:54 AM, Jan Heck < = EMAIL ADDRESS REMOVED = > wrote:

> Is anyone familiar with CSS Modal (http://drublic.github.io/css-modal/)
> and if so, is it truly accessible as it claims to be?
>
> Thanks,
> Jan
>
>
> > >

From: Jan Heck
Date: Thu, Sep 19 2013 11:11AM
Subject: Re: CSS Modal Windows
← Previous message | Next message →

Thank you, Paul. How about this one:
http://accessibility.oit.ncsu.edu/training/aria/modal-window/ ?

On 9/19/13 10:04 AM, "Paul J. Adam" < = EMAIL ADDRESS REMOVED = > wrote:

>No it's not accessible.
>
><section class="semantic-content" id="modal-text" tabindex="-1"
> role="dialog" aria-labelledby="modal-label" aria-hidden="true">
>
> <div class="modal-inner">
> <header id="modal-label"><!-- Header --></header>
> <div class="modal-content"><!-- The modals content --></div>
> <footer><!-- Footer --></footer>
> </div>
>
> <a href="#!" class="modal-close" title="Close this modal"
>data-close="Close"
> data-dismiss="modal">$B!_(B</a>
></section>
>
>Why the heck do they use aria-hidden=true on the modal?
>
>They don't appear to handle focus management and their close button needs
>an aria-label. The modals are at the bottom of the DOM.
>
>I think they're misunderstanding the term "accessible" maybe they're
>assuming that since the "JavaScript is only for sugar. This makes them
>perfectly accessible." which is an incorrect assumption. I guess they're
>thinking since it works without JavaScript it's automatically accessible
>which is a myth.
>
>Paul J. Adam
>Accessibility Evangelist
>www.deque.com
>
>On Sep 19, 2013, at 11:54 AM, Jan Heck < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Is anyone familiar with CSS Modal (http://drublic.github.io/css-modal/)
>> and if so, is it truly accessible as it claims to be?
>>
>> Thanks,
>> Jan
>>
>>
>> >> >> >
>>>

From: Pratik Patel
Date: Thu, Sep 19 2013 11:21AM
Subject: Re: CSS Modal Windows
← Previous message | Next message →

Jan Heck wrote:
Subject: Re: [WebAIM] CSS Modal Windows

Thank you, Paul. How about this one:
http://accessibility.oit.ncsu.edu/training/aria/modal-window/ ?

This was published recently and provides the most comprehensive coverage of
current issues regarding modal windows. I highly recommend everyone to
bookmark this.

Pratik

Pratik Patel
Founder and CEO, EZFire
T: 718-928-5529
M: 718-249-7019
E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
Follow me on Twitter: @ppatel
Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
Skype: Patel.pratik

From: Greg Kraus
Date: Thu, Sep 19 2013 11:52AM
Subject: Re: CSS Modal Windows
← Previous message | Next message →

Thanks Pratik,

One thing I will point out about my example is it was designed as a
teaching tool and should be thought of more as a prototype. Someone
with more graphical skill than myself could make it a whole lot more
presentable.

Here is the accompanying blog post about it.

http://accessibility.oit.ncsu.edu/blog/2013/09/13/the-incredible-accessible-modal-dialog/

Greg

--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
= EMAIL ADDRESS REMOVED =

On Thu, Sep 19, 2013 at 1:21 PM, Pratik Patel < = EMAIL ADDRESS REMOVED = > wrote:
>
> Jan Heck wrote:
> Subject: Re: [WebAIM] CSS Modal Windows
>
> Thank you, Paul. How about this one:
> http://accessibility.oit.ncsu.edu/training/aria/modal-window/ ?
>
> This was published recently and provides the most comprehensive coverage of
> current issues regarding modal windows. I highly recommend everyone to
> bookmark this.
>
> Pratik
>
> Pratik Patel
> Founder and CEO, EZFire
> T: 718-928-5529
> M: 718-249-7019
> E: = EMAIL ADDRESS REMOVED = (or = EMAIL ADDRESS REMOVED = )
> Follow me on Twitter: @ppatel
> Follow me on LinkedIn: http://www.linkedin.com/pub/pratik-patel/9/985/882
> Skype: Patel.pratik
>
>
>
>
> > >

From: GF Mueden
Date: Thu, Sep 19 2013 9:38PM
Subject: Re: CSS Modal Windows
← Previous message | Next message →

=I LOVE IT IT LET ME HAVE A NARROW COLUM.

ONE OF THE LINKS DID NOT- it had no word wrap

GEORGE



On 9/19/2013 12:54 PM, Jan Heck wrote:
> I Cs anyone familiar with CSS Modal (http://drublic.github.io/css-modal/)
> and if so, is it truly accessible as it claims to be?
>
> Thanks,
> Jan
>
>
> > > >

From: Alastair Campbell
Date: Fri, Sep 20 2013 3:39AM
Subject: Re: CSS Modal Windows
← Previous message | No next message

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