12 May

jQuery Tab Trap plugin

I was reading an article on accessible dialogs in web pages, and the author discussed the desirability for screen readers to have the focus trapped in confirm type dialogs until the dialog disappears. The article shows a method for keeping the keyboard focus. It won’t prevent clicking elsewhere, but screen readers navigate by the keyboard rather than the mouse.

That’s fine, but it relies on event capturing rather than bubbling and applies to mouse clicks as well as keyboard navigation.

Here’s a jQuery plugin that will handle tab and shift+tab events, is keyboard specific and uses event bubbling. It is dependent on jQuery and jQuery UI (for “:focusable”). You could implement “:focusable” yourself to get get rid of the jQuery UI dependency.

Use:

Leave a Reply

Your email address will not be published. Required fields are marked *