Data and collections
Accessible tree views: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A tree represents a hierarchical collection with expandable branches and a full tree keyboard model. It can suit a file explorer, but ordinary nested navigation often works better as a list of disclosures and links.
A practical example
A document manager presents folders and documents. Arrow keys move within the hierarchy, expand or collapse branches and preserve a clear active item, while selection remains a separate intentional action where needed.
How to check it
- Navigate with the expected arrow, Home and End behavior, including collapsed and expanded branches.
- Inspect treeitem levels, expanded states and the active or selected item.
- Collapse a branch containing the active item and verify that focus moves logically rather than disappearing.
What can be missed
Do not apply tree/treeitem roles to a static outline without implementing the keyboard contract. A nested list can communicate hierarchy without adding a complex widget interaction.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<ul role="tree" aria-label="Documents">
<li role="treeitem" aria-expanded="false" tabindex="0">Audit folder
<ul role="group" hidden><li role="treeitem" tabindex="-1">Scope document</li></ul>
</li>
</ul>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.