dotjay (home) | dotjay’s lab / tests / jquery-ui-accordion-keyboard-accessibility

jQuery UI Accordion keyboard accessibility tests

Last updated: April 27, 2009

If you find any of the information useful, or if you find anything to be incomplete or inaccurate, please let me know.

Summary

This test page explores keyboard accessibility problems with accordion interfaces, looking specifically at jQuery UI’s Accordion interface widget. The supporting article for this test page can be found on my blog: jQuery UI accordion: enabling keyboard navigation.

Introduction

The jQuery UI Accordion plugin applies tabindex="0" to the element acting as the Accordion header. This is actually done for accessibility reasons; it should tell the browser to make the header element part of the tab order, making it more accessible by keyboard. However, it causes a problem in Firefox, where the Accordion cannot be navigated using the keyboard. The jQuery UI team are aware of this problem and intend to remove the tabindex="0" set by the Accordion code.

To ensure accessibility, the Accordion header should be a normal focusable element, e.g. a hyperlink. The onclick event handlers on such elements are sure to behave correctly under normal usage, so they can be used to trigger the Accordion behaviour. Unfortunately, the Accordion will currently not work correctly if the Accordion header is wrapped in an outer element, e.g. <h2><a class="ui-accordion-header"></a></h2>.

Below are some example implementations to demonstrate the broken keyboard accessibility and some suggested solutions. Notes are included in the first section of each example, followed by the jQuery code and markup used.

NB: If the Accordion does not load correctly, it's likely that the jQuery files have not loaded. If this happens, either wait for a moment to give the files a chance to load, or try refreshing this page.

Tests