Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Keyboard Accessibility Plugin API - v0.4

Owned by Anastasia Cheetham

Last updated: Aug 27, 2008Version comment

3 min read

This documentation refers to the v0.4 released version of the jQuery Keyboard Accessibility Plugin code. For documentation specific to the trunk, please see Keyboard Accessibility Plugin API.

The jQuery Keyboard Accessibility Plugin includes two collections of functions: tabindex functions and keyboard navigation functions.

Keyboard Navigation

jQuery().selectable(options)

*
Invoked on a JQuery which is a "container" node: makes all matched elements descended from the container selectable with the arrow keys. Custom handlers can be provided to inject custom styling and logic.

Arguments:

Name	Description
`options`	An optional collection of name-value pairs that let you modify the plugin's default selection behaviour (see below).

On This Page

See Also

Keyboard Accessibility Tutorial - v0.4

Still need help?

Join the fluid-talk mailing list and ask your questions there.

options:

Name	Description	Values	Default
selectableElements	The set of nodes (a JQuery) which are to form the selectable set (these should all be nested within the DOM element representing the "container")	jQuery	empty
selectableSelector	A selector which will be used to locate the `selectableElements` if they are not set manually, by matching nodes within the container	string	".selectable"
onSelect	A function to be invoked when an element is selected	function	empty
onUnselect	A function to invoked when an element is unselected	function	empty
onLeaveContainer	A function to be invoked when focus leaves the container	function	empty
`direction`	Indicates the orientation of the selectable elements. This value will be used to determine the appropriate mapping for next and previous.	`jQuery.a11y.directions.HORIZONTAL` `jQuery.a11y.directions.VERTICAL`	`jQuery.a11y.directions.VERTICAL`
`autoSelectFirstItem`	Indicates whether or not focus should be moved to the first child of the container (or to the last selected child, depending on `rememberSelectionState`)	boolean	`true`
`rememberSelectionState`	Indicates whether or not to keep track of which child element was most recently selected.	boolean	`true`

jQuery().activatable(customHandler, options)

*
Makes all matched elements activatable with the Spacebar and Enter keys. A handler function may be provided to trigger custom behaviour.

Arguments:

Name	Description
`customHandler`	A function that will be called when the element is activated. The function should accept the element to be activated as a parameter: `myHandler(element);`
`options`	An optional collection of name-value pairs that allow you to active elements using other keystrokes (see below).

options:

Name	Description	Values	Default
`keys`	An array of keycodes to use for activation.		`[fluid:jQuery.a11y.keys.ENTER, jQuery.a11y.keys.SPACE]`

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

*
Selects the next, previous, or specified element in the list of selectables (invoked on the jQuery for the container element)

jQuery().currentSelection();

*
Gets the currently selected element (invoked on the container element)

var selectableContext = jQuery().getSelectableContext();

*
Returns the "that" bound to the container, which exposes further fine-grained operations on the component.

selectableContext.refresh();

*
Where the context was initialised with selectableSelector and not a raw selectableElements, refreshes the list of selectables that the container is managing by reevaluating the selector (to take account of any DOM modifications in the meantime).

jQuery().activate(elementToActivate);

*
Activates the specified item using the default activation handler. Note that if the user has provided a handler function to activatable(), that is the handler that will be used.

Tabindex

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, false if tabindex is not set. There is no reliable technique 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." Note that if a matched element already has a tabindex value that places it in the tab order, the value is unchanged.

Dependencies

The Keyboard Accessibility Plugin dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

<script type="text/javascript" src="Fluid-all.js"></script>

Alternatively, the individual file requirements are:

<script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery/jquery.keyboard-a11y.js"></script>