ARIA keyboard navigation

The ARIA keyboard navigation plugin makes it easy to manage the focus of links/buttons/controls in a menubar/toolbar/controlset per the ARIA best practice guidelines.

As of version 0.8, this plugin manages focus using tabindex alone, which means it should function in all browsers (whether they support ARIA or not).

Browser support

This plugin has been tested and works with the following browsers:

  • Firefox (3.6.3)
  • Internet Explorer (6, 7, 8 )
  • Chrome (4)
  • Safari (4)
  • Opera (10.51)

Examples

After including the required script files and stylesheet, you can add ARIA keyboard navigation support to any group of controls using the managefocus function.

The following example should be run on page load, or right before the </body> tag.
It will find all elements with class of “toolbar” and manage the focus of all links within.

$('.toolbar').managefocus('a');

The controls or controlsParent functions can be used to easily associate a set of controls with the component on the page
that they control.

The following example will find the first parent of the toolbar with a class of “region” and use ARIA semantics to specify that
the toolbar controls that region.

$('.toolbar').controlsParent('.region');

Working example

A complete demonstration of the ARIA keyboard navigation plugin is available.

Also, see the aria keyboard navigation plugin at work on the Pan-irama example page, and the Compact content example page.

Download

ARIA keyboard navigation is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.

Package

Download the complete ARIA keyboard navigation 0.93 example package (.zip)

Individual files

Road map

  1. Bug fixes:
    • Using cursor keys within an input should not take user to next input (they should be able to move around inside the component as usual, tab would be required to move the user out of the input).
    • Using cursor keys to move into an input field should force focus on the input (ATM focus remains on container). No longer a problem as of version 0.8
    • Page scrolls to top of container even if container is already visible on screen. (Consider changing to a scrollTo() plugin based implementation). No need for scrollIntoView as of version 0.8
  2. Replicate key nav behaviour for browsers without ARIA support (by forcing focus, unfortunately may have to leave all elements in tab order for those browsers) Supported by all browsers as of version 0.8
  3. Consider whether “a, :input:visible” should be part of the controlset by default and always focusable — even if other elements are specified e.g: “span.button”.

Posted in

One Response to "ARIA keyboard navigation"

Leave a reply