Examples
MDN Web Docs - ARIA: tree role
An example of a
tree
is a file system selection user interface: a tree view displaying folders and files. Folder items can be expanded to reveal the contents of the folder — which may be files, folders, or both — and collapsed, hiding its contents.
Deque University - Tree View example
Tree view is a hierarchical structure with parent and child nodes that can expand and collapse. Tree views on the web are not common, but they do exist, often to represent a file system or other similar structure of folders and files.
ARIA Authoring Practices Guide (APG) - Tree View ARIA Authoring Practices Guide (APG) - File Directory Treeview Example
[!note] Each of the above has a CodePen example
ARIA Authoring Practices Guide (APG) - Navigation Treeview example Often treeviews are used for complex nested navigation but this is not recommended
[!danger] The above use of a treeview is an anti-pattern. Not the best accessibilty pattern to use. "A pattern more suited for typical site navigation with expandable groups of links is the disclosure pattern."
PatternFly Design System (from Red Hat) - Design Guidelines for tree view
Other Links
(Not so) Simple ARIA Tree Views and Screen Readers @# Articles @# Accessible Culture (2013) Bootstrap Treeview - examples & tutorial Clarity Design System - Documentation - Tree View
Specific accessibility issues with VoiceOver
Accessibility WTF: Voiceover on Mac announcing a list tree as a table? @# Christian Heilmann