Navigation Treeview Example Using Declared Properties

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.

The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties. The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute these values.

Similar examples include:

Example

Foods

Fruits
- Oranges
- Pineapple
- Apples
- Bananas
- Pears
  - Anjou
  - Bartlett
  - Bosc
  - Concorde
  - Seckel
  - Starkrimson
Vegetables
- Podded Vegetables
  - Lentil
  - Pea
  - Peanut
- Bulb and Stem Vegetables
  - Asparagus
  - Celery
  - Leek
  - Onion
- Root and Tuberous Vegetables
  - Carrot
  - Ginger
  - Parsnip
  - Potato
Grains
- Cereal Grains
  - Barley
  - Oats
  - Rice
- Pseudocereal Grains
  - Amaranth
  - Bucketwheat
  - Chia
  - Quinoa
- Oilseeds

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 parent 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 selector.
	`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 selector.
	`aria-setsize="number"`	`li`	Defines the number of `treeitem` elements in the set of `treeitem` elements that are in the same branch and at the same level within the hierarchy.
	`aria-posinset="number"`	`li`	Defines the position of the element within the set of other `treeitem` elements that are in the same branch and at the same level within the hierarchy. Counting is one-based, not zero-based.
	`aria-level="number"`	`li`	Defines the level of the `treeitem` in the hierarchical tree structure. Counting is one-based. Root `treeitem` elements have `aria-level=1`.
`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

CSS: treeLinks.css
Javascript: treeLinks.js
Javascript: treeitemLinks.js