E-mail List Archives
Thread: accessible Lightbox
Number of posts in this thread: 6 (In chronological order)
From: Jennifer Sutton
Date: Fri, May 24 2013 12:33PM
Subject: accessible Lightbox
No previous message | Next message →
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
From: Jennifer Sutton
Date: Fri, May 24 2013 1:04PM
Subject: Re: accessible Lightbox
← Previous message | Next message →
Greetings, again:
After further investigation, I see that we had a rather similar
discussion on the list back in February. It's here:
http://webaim.org/discussion/mail_thread?threadW62
But I note that it ended up focusing a good deal on the issues of an
accessible mobile experience. While I will point that out to my
client, I am wondering if anything new and useful has been built in
the meantime.
After reviewing the thread,, these two links will also be helpful:
Making an accessible dialog box NCZOnline
http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/
and
Screen reader testing of aria role=dialog
http://3needs.org/en/testing/code/role-dialog.html
Thanks.
Jennifer
From: Patrick Burke
Date: Fri, May 24 2013 1:19PM
Subject: Re: accessible Lightbox
← Previous message | Next message →
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
>
>>>
From: Sailesh Panchang
Date: Fri, May 24 2013 7:56PM
Subject: Re: accessible Lightbox
← Previous message | Next message →
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 ADDRESS 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
>>
>>>>>>>
> > > >
From: Elle
Date: Fri, May 24 2013 9:09PM
Subject: Re: accessible Lightbox
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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
> >>
> >>> >>> >>> >
> > > > > > > >
> > > >
From: Bryan Garaventa
Date: Sat, May 25 2013 2:56AM
Subject: Re: accessible Lightbox
← Previous message | No next message
If you would like a jQuery version of a reusable lightbox/modal, there is
one fully testable and documented in the github project at
https://github.com/accdc/tsg
This is a jQuery extension, actually, all of these controls are.
----- Original Message -----
From: "Jennifer Sutton" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Friday, May 24, 2013 11:33 AM
Subject: [WebAIM] accessible Lightbox
> 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
>
> > >