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 Tutorial - v0.5

This documentation refers to version 0.5 of the keyboard accessibility plugin. For documentation specific trunk, please see Keyboard Accessibility Tutorial.

The Fluid library includes a jQuery Keyboard Accessibility plugin. This plugin allows developers to add keyboard handlers to their code without a lot of extra overhead. This tutorial will walk the reader through an example of using the plugin.

Tabindex

The tabindex functions of the keyboard accessibility plugin can be used to add elements on your page to the document's tab order. Adding an element to the tab order allows a user to move focus to the element by tabbing to it rather than having to click on it using a mouse. Some HTML elements are in a document's tab order by default (for example links and form input fields), but many DHTML widgets are constructed using elements that are not automatically in the tab order, such as <div>.

On This Page
Still need help?

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

Let's say you are creating a set of tabs using an unordered list, like so:

<ul id="tabs">
  <li class="tab" id="catsTab"><a href="#catsPanel">Cats</a></li>
  <li class="tab" id="dogsTab"><a href="#dogsPanel">Dogs</a></li>
  <li class="tab" id="hamstersTab"><a href="#hamstersPanel">Hamsters</a></li>
  <li class="tab" id="alligatorsTab"><a href="#alligatorsPanel">Alligators</a></li>
</ul>

The accepted way of accessing tabs using the keyboard is to use the Tab key to navigate to the collection of tabs and then using the arrow keys to navigate among the tabs. To allow this, we will have to

  • add the container to the tab order, and
  • remove the links from the tab order.

Adding the container to the tab order

Normally, an unordered list element (<ul>) is not included in the default tab order of a document. To add it, we can use the plugin's tabbable() function this way:

jQuery("#tabs").tabbable();

This call will set the tabindex attribute of the <ul> element to 0, which will add it to the taborder. (Note that if this function is called on an element that already has a tabindex value that would include it in the tab order, the value will not be changed.)

Removing the links from the tab order

By default, hyperlinks (<a> elements) are included in the natural tab order of a document. In our tabs example, however, the links in the list items have a special purpose, and we do not want them to be included. We can remove them from the tab order by setting the tabindex attribute value to -1 this way:

jQuery(".tab").tabindex(-1);

More coming soon...