Tree View

Purpose

A tree view displays hierarchical data with expandable and collapsible branches. Common uses include file explorers, organizational charts, and nested navigation structures.

Usage Guidance

• Use tree views for hierarchical data with 3 or more levels of nesting
• For simple nested lists, consider <ul> with <details> elements instead
• Ensure tree item labels are descriptive and unique

Keyboard Support

Screen Reader Behavior

Screen readers announce item level, position, and whether the item is expanded or collapsed. Items without children are announced as “end node” or without expansion state.

ARIA Requirements

• role="tree" on the root container
• role="treeitem" on each item
• role="group" on nested <ul> elements
• aria-expanded="true|false" on items that have children
• tabindex="0" on the focused item; tabindex="-1" on all others (roving tabindex)

Common Mistakes

• Not implementing roving tabindex (all items focusable at once)
• Forgetting aria-expanded on parent nodes
• Missing role="group" on nested list containers
• Not announcing the tree level to screen readers

Live Example

Code Structure

<ul role="tree" aria-label="Document tree">
  <li role="treeitem" aria-expanded="false">
    <button aria-expanded="false">Folder Name</button>
    <ul role="group" hidden>
      <li role="treeitem">
        <span>Document 1</span>
      </li>
      <li role="treeitem" aria-expanded="false">
        <button aria-expanded="false">Subfolder</button>
        <ul role="group" hidden>
          <li role="treeitem"><span>Nested Item</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>