jQuery accessible ARIA tree control: from the book Designing with Progressive Enhancement

Tree controls are one of the most popular ways to represent hierarchical information in web interfaces — they present deeply nested, multi-level content in a compact space, and allow users to expand and collapse nodes to control which parts of the tree structure are displayed.

Today, we’re releasing a jQuery tree control plugin that uses progressive enhancement to transform an unordered list (UL) into a dynamic tree control, complete with accessibility features like ARIA attributes, keyboard and mouse behavior, and focus management. In the following article, we’ll give a brief overview of the purpose of this widget and how you can use it in your projects.

This widget is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets we created to accompany our new book, Designing with Progressive Enhancement. Purchasers of the book can access all twelve examples immediately (and we’ll be releasing selected others publicly as open source over the next couple of months as well).

How does this widget work?

This widget provides all the essential features for a basic tree control, with a focus on providing great support for keyboard users and those with disabilities.You can expand and collapse the folder nodes either by clicking them or pressing the left and right arrow keys. The up and down arrows traverse the tree, and clicking the document nodes will navigate to their URL. (NOTE: In this demo, the document file links are set to ‘#’, so they won’t actually go anywhere.)

We’ve also implemented a roving tabindex to preserve the active node in the tree. When you first arrive on the widget the first item in the tree is active by default; if the user changes the focus and tabs away from the control, and then tabs back to it, focus goes to the last active item.

The following example demonstrates the tree plugin, displayed with folder and document icons to represent a file tree:

jQuery Accessible ARIA Tree widget

Note about EnhanceJS: This demo runs on our EnhanceJS framework, which applies progressive enhancement based on browser capabilities, ensuring an accessible page to the widest audience possible. EnhanceJS also adds a “view low-bandwidth version” link beneath the tree control (for users looking at the enhanced version of this site). If you click the link to view the low-bandwidth version of the demo, just remember that you’ll need to click it again to view the enhanced version of this site on future views. You can read more about EnhanceJS at the following article: Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement

How do I use it?

To use this script in your page, you’ll need to download and reference both jQuery and jQuery.tree.js, as well as the associated CSS for the tree (download instructions are found below), and call the tree method on any list element on the page. For example, to create a tree control from a ul element with an id of files, find it using jQuery and call the tree method on it:

$('#files').tree();

Note: be sure to use jQuery’s $(document).ready event to wait until the DOM is ready before running the tree script.

You can also call the tree method on several multi-level hierarchical lists at once to change them all into tree controls. For example, this will turn any ul in a #content container into trees:

$('#content ul').tree();

This plugin is very simple by design, and includes a single option for setting a node (or nodes) open by default. Simply pass in one or more list item selector(s) to the expanded option. For example, to open the first node in the tree by default:

$('#files').tree({
  expanded: 'li:first'
});

Or to expand a list item with an id of documents:

$('#files').tree({
  expanded: '#documents'
});

It’s possible to open several nodes by assigning a class to several list items and referencing that class with the expanded option:

$('#files').tree({
  expanded: '.default-expand'
});

That’s all there is to it!

To understand in detail how this widget works under the covers, and to learn about how to apply the principles in different interactions or more complex scenarios, we recommend purchasing a copy of Designing with Progressive Enhancement.

Download (and help us improve) the code

The tree plugin code is open source and available in a git repository, jQuery-Tree-Control. If you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.

If you’ve already purchased Designing with Progressive Enhancement, you can download all twelve widgets at the code examples download page.

All blog posts