Child pages
  • Keyboard Accessibility Plugin API

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width60%

The jQuery Keyboard Accessibility Plugin makes it easy for developers to add keyboard handlers to their code without a lot of extra overhead.

Please note that, when used as a jQuery plugin, the Keyboard Accessibility API currently handles only two parameters. This is a bug in the current implementation that will be addressed in a future release. If more than two parameters are required, any parameters beyond the function name must be be enclosed in an array.


activatable

Code Block

jQuery().fluid("activatable", customHandler);
jQuery().fluid("activatable", parameterArray);  // parameterArray = [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.
In v1.0: The function should accept the element to be activated as a parameter: myHandler(element);
In v1.1 and beyond: The function should accept the browser event as a parameter: myHandler(event);

options

(Optional) A collection of name-value pairs that allow you to active elements using other keystrokes (see below).

Example:

Code Block
javascript
javascript

var handler = function (evt) {
   $(evt.target).addClass("activated");
};
menu.items.fluid("activatable", handler);

options:

Name

Description

Values

Default

additionalBindings

An array of keycode options to use for activation.

An array of objects of the form

Code Block
javascript
javascript

{
  modifier: <a modifier keycode>, // e.g. $.ui.keyCode.SHIFT
  key: <a keycode>,   // e.g. $.ui.keyCode.DOWN
  activateHandler: <a function>
}

none

Example with options:

Code Block
javascript
javascript

var handler = function (evt) {
   $(evt.target).addClass("activated");
};
/ Bind the Space, Enter, and Down Arrow keys to the activate event. 
// Notice the use of "additionalBindings," which is required only for the Down Arrow Key.
// By default, Space and Enter are set up for you.
var opts = {
    additionalBindings: {
        modifier: null,
        key: $.ui.keyCode.DOWN,
        activateHandler: alternateActivate
    }
};
menu.items.fluid("activatable", [handler, opts]);
Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid

Include Page
Still Need Help panel
Still Need Help panel

...

activate

Code Block

jQuery().fluid("activate");

...

Code Block
javascript
javascript

menu.items[selectedIndex].fluid("activate");

...

selectable

Code Block

jQuery().fluid("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.

NOTE: The container element must be keyboard focusable. If necessary, add tabindex="0" to the container.

Arguments:

Name

Description

options

(Optional) A collection of name-value pairs that let you modify the plugin's default selection behaviour (see below).

...

Code Block
javascript
javascript

menu.container.fluid("selectable", {
    selectableSelector: ".menuItem",
    onSelect: function (evt) {
        <function to show sub menu>
    },
    onUnselect: function (evt) {
        <function to hide sub menu>
    },
    autoSelectFirstItem: false,
    rememberSelectionState: false
});

currentSelection

Code Block

jQuery().fluid("selectable.currentSelection");

...

Code Block
javascript
javascript

var currentMenuItem = menu.container.fluid("selectable.currentSelection");

select, selectNext, selectPrevious

Code Block

jQuery().fluid("selectable.selectNext");
jQuery().fluid("selectable.selectPrevious");
jQuery().fluid("selectable.select", elementToSelect);

...

Code Block
javascript
javascript

menu.container.fluid("selectable.select", secondMenuElement);
menu.container.fluid("selectable.selectNext");  // will select third item
menu.container.fluid("selectable.selectPrevious");  // will select second item again

...

tabbable

Code Block

jQuery().fluid("tabbable")

...

Code Block
javascript
javascript

menu.container.fluid("tabbable");

...

Deprecated. This code is now available in jQuery core. Use jQuery.attr("tabindex") instead.

Code Block

jQuery().fluid("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.

Code Block

jQuery().fluid("tabindex", value)

...

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

Code Block
html
html

<script type="text/javascript" src="InfusionAll.js"></script>

...

In v1.2 and earlier:

Code Block
html
html

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>

As of v1.3:

Code Block
html
html

<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/FluidDocument.js"></script> <!-- New in v1.3 -->
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>