WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Lightbox / modal form keyboard accessiblity

for

From: Gian Wild
Date: Aug 27, 2014 8:12PM

We use DataTables - we are very impressed!
Just make sure if you can't exit a component using the TAB key that you
tell the user they need to use the ESC key!

Cheers,
Gian

*Gian Wild, Director*
*AccessibilityOz*

*Email.* <EMAIL REMOVED>
*Web. *www.accessibilityoz.com.au
*Phone:*
Canberra: (02) 6108 3689
Melbourne: (03) 8677 0828
Brisbane: (07) 3041 4011





On 28 August 2014 01:54, Allan Jardine < <EMAIL REMOVED> >
wrote:

> Hi all,
>
> I develop a Javascript library called DataTables ( http://datatables.net
> ) and I'm keen for it to be accessible to all users. DataTables has an
> editing component which displayed a form in a lightbox. Currently the form
> can be fully controlled via the keyboard, however the tabbing behaviour
> leaves a bit to be desired.
>
> When the form is opened the focus is set to the first input element and
> the user can navigate the form using the tab key, but they can also tab
> outside the form to the elements under the lightbox.
>
> I could capture the focus using the method described here (
> http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/
> ) and force it to always be in the lightbox and it looks like this is what
> jQuery UI do:
> http://jqueryui.com/dialog/#modal-confirmation
>
> But to mind that is quite disruptive since you can't exit the lightbox /
> modal with the tab key. For example I would expect `tab` when pressed on
> the last focusable element to move the focus to the address bar in the
> browser - but here there is no way out of that.
>
> Does anyone have any advice on how to cope with this and have a "natural"
> tab flow with a lightbox like display?
>
> Many thanks,
> Allan
>
> > > >