WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS Modal Windows

for

From: Paul J. Adam
Date: Sep 19, 2013 11:04AM

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