WebAIM - Web Accessibility In Mind

E-mail List Archives

Lightbox / modal form keyboard accessiblity

for

From: Allan Jardine
Date: Aug 27, 2014 9:54AM

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