E-mail List Archives

Re: accessible Lightbox


From: Sailesh Panchang
Date: May 24, 2013 7:56PM

An elegant fix is offered by the attribute aria-hidden without using
Thread: ARIA modal dialogs only read out focusable items (forms and links)

The only other thing that is required is from the later part of
/making-an-accessible-dialog-box/ article:
Setting focus back on the element that triggered the lightbox / dialog.

I have been including every facet of the fix in recommendations to
clients for about four years now (without the actual ARIA code) but am
now suggesting the aria-hidden method.

Another tip I have always included is: notify users that the link /
button on the main page launches a dialog /popup by suffixing
off-screen text "- opens popup".
That way users can try to discover the popup in case their browser /
At does not move focus to the dialog or to overcome a defect in the


Sailesh Panchang

On 5/24/13, Patrick Burke < <EMAIL REMOVED> > wrote:
> Hi Jennifer,
> I'll throw one more link into the mix. Not quite the reusable object
> you're after, but Derek Featherstone gives the basic lightbox recipe.
> He goes through all the needed components, including keyboard
> controls & focus management, based on an example site:
> http://webstandardssherpa.com/reviews/overlays-and-lightboxes-keys-to-success/
> No mention of ARIA, though. I assume that would still be necessary to
> get screen readers to respond correctly. But maybe it's a genius
> non-ARIA solution.
> In any case, if someone with coding skills wants to build this thing,
> the generic accessible lightbox seems well within reach.
> Patrick
> At 11:33 AM 5/24/2013, Jennifer Sutton wrote:
>>Greetings, WebAIM:
>>I'm looking to solve the issue of the Accessible Lightbox, or come as
>>close as I can. I'm seeing a number of good discussions of the issue,
>>but I haven't found a solution about which I'm confident. I see some
>>that may help with keyboard access, but I'm not seeing one that will
>>solve the issue of the new content opening up at the bottom of the
>>page (with no indication to the screen reader user that the page has
>>changed, much less how to get to that content).
>>I'd prefer either jQuery or a non-library-centric option. For the
>>record, in case this may speed others who may be searching the archive ...
>>Thanks especially to you, Patrick, for a clear articulation of the
>>issues in this recent Accessify Forum thread:
>>And thanks to Roger Johansson and Graham Armfield for their posts
>>articulating the features that are needed:
>> From 2009:
>>And from 2011:
>>If somebody's built it, I'd like to use it.
>>This one might come close. If anyone's had experience with it, please
>>let me know:
>> * https://github.com/fnagel/jQuery-Accessible-RIA/wiki/lightbox
> > > >