jQuery Tabindex Plugin

In follow up to Simon’s recent posting about the intricacies of cross-browser support for the tabindex attribute, I’ve written a jQuery plugin that makes it easy to get, set, and check for the presence of tabindex values.

Getting the Source Code

The source code is currently available in the Fluid Project SVN, and will be included in the Fluid 0.3 release. Long term, we hope to include this plugin directly in jQuery UI. jqUnit tests are also available.

This plugin works on FireFox, Safari, Internet Explorer 6+, and Opera 9.5+. If people find this plugin useful, I’d be happy to contribute it to the jQuery Plugin repository. I’ve licensed this code in the same manner as jQuery, so it’s available under a dual GPL/MIT license.

How to Use It

The API is super-simple and should be familiar to jQuery users:

jQuery().tabindex()
Gets the tabindex value of the first matched element. If the element doesn’t have a tabindex attribute, undefined is returned. The value returned is normalized to a Number, since browser implementations vary.

jQuery().tabindex(value)
Sets the tabindex value on all matched elements. value can be either a String or a Number, but valid tabindex attributes need to be integers.

jQuery().removeTabindex()
Removes the tabindex attribute from all matched elements.

jQuery().hasTabindex()
Checks for the presence of a tabindex attribute on the first matched element. Returns true if the element has a tabindex attribute, and returns false if tabindex is not set. Neither Simon or I have yet to come up with a reliable method for querying tabindex attributes on versions of IE < 6, so this method will always return false on IE 5.5 and below.

Future Directions

I wrote this tabindex plugin as part of a larger project to build a comprehensive keyboard accessibility plugin for jQuery. While it’s not quite finished, this plugin will make it easy for developers to add keyboard handlers to their code without a lot of extra overhead. A common problem in the DHTML world is that user interfaces are built to work solely with the mouse, excluding users who need to use the keyboard to navigate. jquery.keyboard-a11y takes the hard work out of making your interfaces usable with the tab and arrow keys.

This is the first library that I know of that provides DHTML keyboard accessibility without requiring you to implement a whole model for widgets. While it doesn’t solve all your accessibility needs, it’s designed to work with lots of different types of markup and be consistent with the jQuery approach. Here’s a quick summary of the API:

jQuery().tabbable()
Adds all matched elements to the tab order by giving them a tabindex attribute of “0.”

jQuery().selectable(container, customHandlers, options)
Makes all matched elements selectable with the arrow keys. Provide your own customHandlers to inject custom styling and logic. Options lets you modify the plugin’s default selection behaviour.

jQuery().activatable(customHandlers, options)
Makes all matched elements activatable with the Spacebar and Enter keys. Provide your own handlers to trigger custom behaviour. Options allow you to activate elements using other keystrokes.

Source Code

The in-progress code for this jQuery keyboard accessibility plugin is freely available. There’s still a lot of work be done before it will be ready for prime time, but I’d encourage you to take a look and let me know what you think.

jquery.keyboard-a11y.js

Summary

We’ve been really excited about using jQuery on the Fluid Project. Our Reorderer, an accessible library for drag-and-drop sorting of elements, is built entirely on jQuery and jQuery UI. We hope these new accessibility plugins will be helpful in enabling greater DHTML accessibility within the jQuery and Fluid communities.

I’d love to hear your feedback or suggestions for these plugins. Don’t hesitate to get in touch.

8 Responses to “jQuery Tabindex Plugin”

  1. dinhhai says:

    Hi Colin,

    None of the given url work for me. Please check them again.

    Thanks.

  2. Colin Clark says:

    Hi,

    Apologies for the inconvenience. Our SVN server was down over the weekend. It’s back, so give those links a try and let me know how it goes.

    Colin

  3. Stacie J says:

    Your links aren’t working again and I’m all geeked up to use this plug-in…

    Help!

  4. colin says:

    Stacie,

    Thanks for pointing this out. We restructured our SVN recently to promote the keyboard-a11y plugin to a full part of the Fluid Infusion 0.3 release. We also merged the tabindex and keyboard plugins into one.

    I’ve updated the links in the blog posting. Let me know how your experience is using the plugin; it’s still a work in progress so your feedback is very useful.

  5. Sean says:

    It would be awesome if you gave an example for this plug-in in action :) Showed all the possibilities. jQuery plug-ins without demo’s always prove to be stressful because emulation is more difficult without a work example.

    Thank you for reading, looks like a great plugin, will give it a try.

  6. Jonathan Simcoe says:

    I concur with Sean. I’m trying to access some of these functions, but have no idea how to construct them in code. A working example would be a great help! Thanks for your work on this.

  7. [...] has changed since I last posted about Fluid’s keyboard accessibility plugins for jQuery. Here’s a quick summary of what’s [...]

  8. colin says:

    Links to the latest version of this code, along with API documentation and tutorials can be found in my latest blog post:

    http://fluidproject.org/blog/2009/07/09/keyboard-accessibility-for-jquery-and-infusion/

    Here’s a quick summary of the important information:

Leave a Reply