Skip to content

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

(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