WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible Lightbox

for

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

Jennifer,
An elegant fix is offered by the attribute aria-hidden without using
role=dialog:
Thread: ARIA modal dialogs only read out focusable items (forms and links)
http://webaim.org/discussion/mail_thread?threadV64

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

Regards,

Sailesh Panchang
www.deque.com


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:
>>
>>http://www.accessifyforum.com/viewtopic.php?t487
>>
>>And thanks to Roger Johansson and Graham Armfield for their posts
>>articulating the features that are needed:
>>
>> From 2009:
>>http://www.456bereastreet.com/archive/200910/lightboxes_and_keyboard_accessibility/
>>
>>And from 2011:
>><http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/>;http://www.coolfields.co.uk/2011/12/specification-for-an-accessible-lightbox/
>>
>>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
>>
>>Thanks.
>>
>>Best,
>>Jennifer
>>
>>>>>>>
> > > >