Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 14 Next »

Overview

Fluid is increasingly using the jQuery JavaScript toolkit for low-level DOM manipulation, event binding, and utilities. jQuery's simplicity and elegance provide a firm foundation upon which to build the Fluid component framework.

One primary requirement lacking in jQuery (and in most DHTML toolkits in general) at the moment is robust support for keyboard accessibility. To this end, Fluid is developing a jQuery plugin that will make it significantly easier to create DHTML interfaces that support familiar idioms for navigating with the keyboard.

The Plugin

jQuery.keyboard-a11y

  • Makes it easier inject keyboard accessibility into your DHTML interfaces, without having to write onerous hand-rolled code for managing focus and tabbing behaviour.
  • Provides cross-browser support and normalization for getting, setting, and evaluating the presence of the "tabindex" attribute.
  • Still in development.
  • More information about browser incompatibilities can be found in Simon Bates' recent Fluid blog post

This plugin makes 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.tabindex will take the hard work out of making your interfaces usable with the tab and arrow keys.

This library 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:

download jQuery.keyboard-a11y

Keyboard A11y API

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().hasTabindexAttr()

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.

jQuery().hasTabindex()

Returns true if the element has a tabindex attribute, or is an HTML element that is included in the tab order by default (i.e. a, input, button, select, area, textarea, or object).

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.

jQuery ().selectNext ();
jQuery ().selectPrevious ();
jQuery ().select (elementToSelect);

Selects the next, previous, or specified element in the list of selectables.

jQuery ().currentSelection ();

Gets the currently selected element.

jQuery ().activate (elementToActivate);

Activates the specified item using the default activation handler.

  • No labels