Navigation Treeview Example Using Computed Properties

Code is complete for this example. Feedback and progress on editorial work on this page are being tracked in issue 225.

The below example demonstrates how the Treeview Design Pattern can be used to build a navigation tree for a set of hierarchically organized web pages. In this example, the user can browse a set of pages about foods that is organized into categories. Activating an item in the tree will open a page about the chosen food.

Since a tree item is the only kind of interactive element that can be contained in a tree, links to web pages in a navigation tree have the treeitem role.

This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a Navigation Treeview using declared properties.

Similar examples include:

Example

Accessibility Features

To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes.

Terms Used to Describe Trees

A tree item that can be expanded to reveal child items is called a parrent node. It is a closed node when the children are hidden and an open node when it is expanded. An end node does not have any children. For a complete list of terms and definitions, see the Treeview Design Pattern.

Keyboard Support

Key Function
Enter
or Space
  • Performs the default action (e.g. onclick event) for the focused node.
  • In this example, the default action is to activate the link, opening its target page.
Down arrow
  • Moves focus to the next node that is focusable without opening or closing a node.
  • If focus is on the last node, does nothing.
Up arrow
  • Moves focus to the previous node that is focusable without opening or closing a node.
  • If focus is on the first node, does nothing.
Right Arrow
  • When focus is on a closed node, opens the node; focus does not move.
  • When focus is on a open node, moves focus to the first child node.
  • When focus is on an end node, does nothing.
Left Arrow
  • When focus is on an open node, closes the node.
  • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
  • When focus is on a root node that is also either an end node or a closed node, does nothing.
Home Moves focus to first node without opening or closing a node.
End Moves focus to the last node that can be focused without expanding any nodes that are closed.
a-z, A-Z
  • Focus moves to the next node with a name that starts with the typed character.
  • Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
  • Search ignores nodes that are descendants of closed nodes.
* (asterisk)
  • Expands all closed sibling nodes that are at the same level as the focused node.
  • Focus does not move.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
tree ul
  • Identifies the ul element as a tree widget.
  • Because focus movement in the tree is managed with a roving tabindex, the tree container does not need a tabindex attribute.
aria-labelledby="IDREF" ul Refers to the heading element that contains the label that identifies the purpose of the tree.
treeitem li
or a
  • Identifies the element as a treeitem.
  • The role is set on either the li or on an a element contained in the li.
  • The role is set on the element that is interactive and focusable:
    • If the node is a parent node that does not contain a link, the li element has the treeitem role.
    • If the node is an end node that contains a link, the a element has the treeitem role.
tabindex="-1" li
or a
  • Makes the element with the treeitem role focusable without including it in the tab sequence of the page.
  • All treeitem elements are focusable, but only one is included in the tab sequence.
tabindex="0" li
or a
  • Includes the element with the treeitem role in the tab sequence.
  • Only one treeitem in the tree has tabindex="0".
  • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
  • When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in the section on roving tabindex.
aria-expanded="false" li
  • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
  • Indicates the parent node is closed, i.e., the descendant elements are not visible.
  • The visual indication of the collapsed state is synchronized by a CSS attribute selecter.
aria-expanded="true" li
  • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
  • Indicates the parent node is open, i.e., the descendant elements are visible.
  • The visual indication of the expanded state is synchronized by a CSS attribute selecter.
group ul
  • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
  • The group is contained in the element that serves as the parent treeitem.
  • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
none li
  • Hides the implicit listitem role of the li element from assistive technologies.
  • A listitem is required to be contained by a list, but the containing element is no longer a list; it is a tree or a group.
  • Removing the listitem semantic from the browser's accessibility tree eliminates the potential for confusing rendering by assistive technologies.

Javascript and CSS Source Code

HTML Source Code