Keyboard Accessibility Plugin API - v0.4
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 | 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 |
| Indicates the orientation of the selectable elements. This value will be used to determine the appropriate mapping for next and previous. | | |
| Indicates whether or not focus should be moved to the first child of the container (or to the last selected child, depending on | boolean | |
| Indicates whether or not to keep track of which child element was most recently selected. | boolean | |
*
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 |
|---|---|
| A function that will be called when the element is activated. The function should accept the element to be activated as a parameter: |
| An optional collection of name-value pairs that allow you to active elements using other keystrokes (see below). |
options:
Name | Description | Values | Default |
|---|---|---|---|
| An array of keycodes to use for activation. |
| |
*
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>