jQuery accessible ARIA tree control: from the book Designing with Progressive Enhancement
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
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?
Permalink to '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.
How do I use it?
Permalink to '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
Permalink to '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.