Tree view

CANARY

Easy to use for everyone

The tree view items will focus top-down, including the child nodes of any expanded parent items. Tree view items can be iterated over with the tab or up and down keys. Enter and space keys can be used to expand the currently selected parent node, or to follow the link of the currently selected node.

For Assistive Technology

Tree view items consist of a button and an extended text area. When using a screen reader, the title of the tree view will be declared first along with how many items it contains. When focussed on a tree view item, screen readers will state its:

Label
Index
State
Number of nested items

Any tree view items which aren’t in focus will not be declared by the screen reader.

Based on

The tree view component has been based on the following resources:

WCAG - Target Size (Enhanced) (Level AAA) , W3C Web Accessibility Initiative, accessed February 2024.
Retool - Designing a UI for Tree Data - Keyboarding and Accessibility , Retool, accessed August 2023.
A11Y - Improving Icon Usability and Accessibility , A11Y Collective, accessed February 2024.

Testing

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.

Last reviewed 23 August 2024 .