WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS Modal Windows

for

From: Jan Heck
Date: Sep 19, 2013 11:11AM

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 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 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
>>
>>
>> >> >> >
>>>