A parent treeitem must expose aria-expanded

Rule treeitem-expanded · Component patterns (best practice) · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A treeitem that owns a sub-level (a role="group" of child items) is expandable. Without aria-expanded, assistive technology cannot tell whether the branch is open or closed, nor that it is expandable at all.

How to fix#

Add aria-expanded (true/false) to any treeitem that contains a role="group", and keep it in sync.

Example#

<li role="treeitem">Fruit<ul role="group"><li role="treeitem">Apple</li></ul></li>

<li role="treeitem" aria-expanded="true">Fruit<ul role="group"><li role="treeitem">Apple</li></ul></li>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• APG — Tree View