Keyboard Accessibility Tutorial - v0.4

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...