WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Lightbox / modal form keyboard accessiblity

for

From: Paul J. Adam
Date: Aug 27, 2014 10:28AM

Hi Allan, I remember I've emailed you before with some recommendations for a11y improvement :) Glad to see you're still working at making DataTables accessible!

I have an alertdialog demo and a modal dialog demo, here's the modal: http://pauljadam.com/demos/dialog.html It has the same problem that you are always trapped inside the tab ring of the modal and cannot tab into the address bar.

Is that a big deal though because they can always hit command + L to move into the address bar or hit ESC to close the dialog then tab to it.

I think modals are usually only closed either by taking action with the buttons inside them or hitting the escape key or close X button.

It's something I've not considered before, not sure if necessary though?

Good luck either way with the library, it's excellent to see JS Library developers working on Accessibility!

Thanks!


Paul J. Adam
Accessibility Evangelist
www.deque.com

On Aug 27, 2014, at 10:54 AM, 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
>
> > >