WAI-ARIA: Role=Tree • Digital A11y

Description

A type of list that may contain sub-level nested groups that can be collapsed and expanded.

To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.

Elements with the role tree have an implicit aria-orientation value of vertical.

Example

HTML Example

In the following code sample, because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit WAI-ARIA role of presentation to override the user agent’s implicit native semantics for list items.

<ul role="tree">
<li role="presentation">
<a role="treeitem" aria-expanded="true">An expanded tree node</a>
</li>
…
</ul>

Characteristics

Superclass Role

select

Subclass Roles

treegrid

Required Owned Elements

group → treeitem
treeitem

Supported States and Properties

aria-multiselectable
aria-required

Inherited States and Properties

aria-activedescendant
aria-atomic
aria-busy (state)
aria-controls
aria-current (state)
aria-describedby
aria-details
aria-disabled (state)
aria-dropeffect
aria-errormessage
aria-expanded (state)
aria-flowto
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-orientation
aria-owns
aria-relevant
aria-roledescription

Name From

author

Accessible Name Required

True

Implicit Value for Role

Default for aria-orientation is vertical

Semantic HTML

No HTML element equivalent.

Reference

W3C (opens new window)