WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Javascript Lightbox & Accessibility

for

From: Bryan Garaventa
Date: Sep 10, 2013 10:53AM

The only ARIA attribute that really is of importance for modals/lightboxes
is aria-hidden, since this will hide the background content from screen
reader users in IE, FF, Chrome, and Safari.

The following is excerpted from the AccDC Technical Style Guide at
http://whatsock.com/tsg
under Modals.

Expected behaviors: Ensure that the background content is hidden from screen
reader users, ensure that the beginning and ending boundaries are conveyed
to screen reader users, make sure the modal can be closed from the keyboard,
and ensure that circular tabbing confines keyboard focus within the modal
content.

Live demo:
http://whatsock.com/tsg/Coding%20Arena/Modals/Modal%20(Internal%20Content)/demo.htm
If you have a DOM utility such as Firebug, you can see what the attributes
are doing when the modal is opened and closed.

Additional ARIA role and compatibility differences are documented on the TSG
page as well.


----- Original Message -----
From: "Jennifer Smith" < <EMAIL REMOVED> >
To: < <EMAIL REMOVED> >
Sent: Tuesday, September 10, 2013 6:22 AM
Subject: [WebAIM] Javascript Lightbox & Accessibility


> Hi!
>
> I'm testing a page for accessibility and am newish to working with
> accessibility and javascript.
>
> Here's the page I'm testing with a lightbox code:
> http://www.cdc.gov/nchhstp/testing_sandbox/wide.html.
>
> I've done what I can do (with my HTML and CSS skills) to make the same
> content accessible without javascript - to download the PDFs.
>
> I'm looking for tips, ideas, suggestions for making it better. Would some
> ARIA roles help here? If so, where do I look for resources on improving
> this feature for accessibility?
>
> Thanks,
> Jen
>
> > >