# ARIA Treeview
> Inspect how @humanspeak/svelte-json-view-lite renders accessible JSON trees with labelled controls, expanded state, and keyboard focus.
**Source:** [https://jsonview.svelte.page/examples/accessibility](https://jsonview.svelte.page/examples/accessibility)
**Markdown mirror:** [https://jsonview.svelte.page/examples/accessibility.md](https://jsonview.svelte.page/examples/accessibility.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: aria treeview.
Inspect how the viewer exposes tree roles, expansion state, labelled controls, and keyboard-ready focus behavior.
**Metadata:** tag: `A11Y` | role: `tree` | focus: `roving`
### Notes
- Containers render as `role="tree"` / `role="group"` nodes with `aria-expanded` and `aria-controls` wiring each disclosure to its children.
- Arrow keys walk the tree and `Enter` / `Space` toggle a node — the same keyboard model ships in the packaged component.
- A roving `tabindex` keeps a single tab stop for the whole tree so focus never gets trapped inside deep nesting.
### Source
#### AccessibilityTree.svelte
Source file: [src/lib/examples/accessibility/demos/AccessibilityTree.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/accessibility/demos/AccessibilityTree.svelte)
```svelte