E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Allan Jardine
Date: Wed, Aug 27 2014 9:54AM
Subject: Lightbox / modal form keyboard accessiblity
No previous message | Next message →

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

From: Paul J. Adam
Date: Wed, Aug 27 2014 10:28AM
Subject: Re: Lightbox / modal form keyboard accessiblity
← Previous message | Next message →

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 ADDRESS 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
>
> > >

From: Gian Wild
Date: Wed, Aug 27 2014 8:12PM
Subject: Re: Lightbox / modal form keyboard accessiblity
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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
>
> > > >

From: Allan Jardine
Date: Mon, Sep 01 2014 9:22AM
Subject: Re: Lightbox / modal form keyboard accessiblity
← Previous message | No next message

Hi Gian and Paul

Thanks for your replies and thoughts on this (and great to hear you use DataTables, Gian :-) )!

I'll take what appears to be the current conventional approach and lock the tab key into the form.

I wonder if ultimately there might be scope in the specs to provide this kind of functionality, a kind of z-index for tab ordering I guess (allowing more than one modal / lightbox to be shown layered on top of each other). What do you think?

Thanks,
Allan




> From: Gian Wild < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Lightbox / modal form keyboard accessiblity
> Date: 28 August 2014 03:12:21 BST
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> 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 ADDRESS REMOVED =
> *Web. *www.accessibilityoz.com.au
> *Phone:*
> Canberra: (02) 6108 3689
> Melbourne: (03) 8677 0828
> Brisbane: (07) 3041 4011
>


> From: "Paul J. Adam" < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Lightbox / modal form keyboard accessiblity
> Date: 27 August 2014 17:28:11 BST
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> 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

---
Allan Jardine - Founder
SpryMedia Ltd - Registered in Scotland SC456502
w: www.datatables.net
e: = EMAIL ADDRESS REMOVED =