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.