WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible Lightbox

for

From: Elle
Date: May 24, 2013 9:09PM

Jennifer:

Here's the latest from our examples section of the Simply Accessible
website for an accessible modal dialog, and we will be publishing a user
interaction guide shortly on the main site, too:
http://examples.simplyaccessible.com/modal.js/



Hope that helps, and if there are specific interactions or scenarios that
you need to address, just let me know and we can help.
~Elle




If you want to build a ship, don't drum up the people to gather wood,
divide the work, and give orders. Instead, teach them to yearn for the vast
and endless sea.
- Antoine De Saint-Exupéry, The Little Prince


On Fri, May 24, 2013 at 9:56 PM, Sailesh Panchang <
<EMAIL REMOVED> > wrote:

> 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?thread=5664
>
> 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?t=10487
> >>
> >>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
> >>
> >>> >>> >>> >
> > > > > > > >
> > > >