Note: Keyboard users will need to navigate back to the navigation tree to view other pages. This behavior is appropriate when common or important use case scenarios assume users want to start interacting with the loaded content after activating the tree item. If activating a tree item changes content on the page without triggering a browser page load, i.e., works like typical single-page apps, the focus position after the content load significantly affects efficiency for keyboard and assistive technology users.Īccessible navigation trees typically implement one of the following two behaviors:Īctivating a tree item moves focus to the beginning of the new content, ideally a level one heading with content that matches the name of the tree item that was activated.įocusing on the heading informs screen reader users that navigation is complete and confirms the destination. File Directory Treeview using declared propertiesĪccessibility Features Focus Movement After Content LoadĪn important aspect of designing a navigation tree experience is the behavior of keyboard focus when an item in the tree is activated.File Directory Treeview using computed properties.If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of aįile Directory Treeview Example Using Declared Properties. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. The ARIA specification for these properties states that browsers can, but are not required to, compute their values. This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the Example Disclosure Navigation Menu.Īs noted above, the disclosure pattern is better suited for most web sites because few sites need the additional keyboard functionality required to support the ARIA tree role.

A pattern more suited for typical site navigation with expandable groups of links is the disclosure pattern.Ĭan be used to build a navigation tree for a set of hierarchically organized web pages.Correct implementation of the tree role requires implementation of complex functionality that is not needed for typical site navigation that is styled to look like a tree with expandable sections.CAUTION! Before considering use of the ARIA tree pattern for site navigation, it is important to understand:

Angularjs treeview table