Suppose you want to compare two sales regions without looking at the chart. An exact-value table lets you retrieve a number. A navigation tree adds another route: hear an overview, choose a region, then inspect its months. You decide how much detail to open.
Why this matters
Different questions need different reading tools. A table is useful for looking up or comparing exact values, while a long list can make it harder to discover the structure. Research tools such as Olli and Data Navigator explore ways to navigate a visualization through a separate, meaningful structure. Semiotic's tree applies that idea to the chart configuration.
Walk from the overview to one value
This demo shows the navigation tree for two synthetic sales series. Press Tab to enter it. Use Up and Down to move between visible items, Right to expand a branch, and Left to close it or return to its parent. Open the West series and find March: sales are 6,800. The East series gives you the same months to compare.
Tab into the tree. Up/Down moves, Right expands, and Left collapses or returns to a parent. The tree is shown visually here; it can also be presented for screen readers.
- ▾ A line chart of sales by month, split by region. sales ranges from 2,200 (Jan) to 6,800 (Mar), with a mean of 4,000 across 6 points.
- X axis: month, Jan to Mar (6 points).
- Value axis: sales, 2,200 to 6,800.
- ▸ Series West: sales ranges from 4,200 (Jan) to 6,800 (Mar), with a mean of 5,366.67 across 3 points.
- ▸ Series East: sales ranges from 2,200 (Jan) to 3,100 (Feb), with a mean of 2,633.33 across 3 points.
A collapsed series carries a summary, so you can decide whether to explore it. Its points have labels and positions within the group. Home and End move to the first and last visible items. These are the standard tree controls; the instructions do not depend on seeing a highlight or using a pointer.
How it works
buildNavigationTree reads a chart configuration and returns a navigation model.AccessibleNavTree renders that model as real HTML with ARIA tree semantics. The structure can sit beside a canvas drawing because it describes the data, rather than asking assistive technology to recover meaning from pixels.
When to reach for it
Use structured navigation when groups, series, or hierarchy help a reader choose where to look next. Keep an exact-value table for lookup and comparison, and add an authored summary for the main point. For a single value, a clear label and explanation are usually enough. Check the component's navigation support before promising the same structure for every chart family.
Wiring it up
<ChartContainer chartConfig={{ component: "LineChart", props }} navigable describe > <LineChart {...props} /> </ChartContainer>The container adds the navigation and generated description when requested. Individual charts expose their own documented keyboard and table behavior; adding this richer tree is a separate choice. For an application-owned layout, render AccessibleNavTree yourself and use onActiveChange to respond when the reader moves.
Keep readers on the same item
useNavigationSync can coordinate the active tree item with chart observation and selection. This lets a keyboard user and a collaborator looking at the chart discuss the same datum. The navigation reference shows the extra wiring; the standalone tree above demonstrates navigation only.
Other places this helps
The overview-to-detail path is useful for a dashboard's series, an organization chart's departments, and a map's regional groups. Choose the grouping that helps someone answer a question, then test it with the readers and assistive technologies you intend to support.