Navigation Treeview Using Computed Properties

The following example demonstrates using the treeview design pattern build a navigation tree for a set of hierarchically organized web pages.

Example

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.

Foods