U11.02.2Traversal should support switching between series and data-point levelsdesign

Forcing keyboard users through every point in order ignores that a chart also has a series level above it

Aliases: hierarchical traversal · series switching

What it is

Multi-series charts have two-level structure: the top level is series ("sales," "profit"), the bottom level is the data points inside each series. A chart supporting only single linear traversal forces users to march through every point of every series in a row (all 24 months of series A, then all 24 of series B); a user wanting to compare "two series in the same month" must memorize everything in between. Hierarchical traversal returns the structure to the user: at the series level choose "which line I'm reading," drop to the point level to move within it, with a fixed switch key between levels.

Why it happens

Hierarchical traversal works because it aligns with the chart's semantic structure: users' analytical questions are mostly framed by series ("compare the two lines' trends," "see profit's performance last year"), and linear traversal breaks that frame (turning "compare the same time point" into a memory task), while hierarchical traversal preserves it (lock the series first, then scan time). The common operation contract: left/right arrows move within the current level (between series at the series level, between time points at the point level), Tab or up/down switches levels, Escape goes back a level. Announced feedback on level switches is the usability precondition: entering the point level announces "Series 2 of 3: profit," so users know which layer they are operating. The hierarchy model also fits progressive disclosure naturally: enter at the series level by default (quick overview of all series), descend to points on demand (drill into one series)—isomorphic to visual users' "scan the whole, then focus" reading path—so hierarchical traversal is not merely an accessibility feature but a way for keyboard users to rebuild visual users' reading strategy.

Where it stops holding

The hierarchy model's boundary is the chart's structural depth: the two-level model (series/points) covers most bar and line charts; deeper structures (grouped bars with group/subgroup/point at three levels) require extending the hierarchy or merging levels—each extra level raises both mental load and keystroke cost, so beyond three levels the better answer is simplifying the chart structure, not expanding the traversal model. Single-series charts need no series level (one level suffices); forcing the two-level model on them only adds empty operations. The level-switch keys must also coordinate with the same group's traversal-order definitions: the focus landing behavior when entering a level (starting from the first point or the last position) must be deterministic.

Applying it

  • Implement two-level traversal on multi-series charts: left/right moves between series, a drill key enters that series' point level, a back key returns to the series level.
  • Announce the level and context immediately on switches ("entering point level: profit, Jan 2024, 12 points").
  • Document each level's available keys and switch behavior in the keyboard contract, maintained together with the traversal-order definitions.
  • Verification: have a screen-reader user complete the task "compare series A and B in the latest month"; if it requires memorizing large amounts of intermediate information, hierarchical traversal is missing or poorly designed.

Related

  • Same group: U11.02.1 Chart elements need a predictable keyboard traversal order · U11.02.3 Announcements must include identifier, value, and unit · U11.02.4 Overall trends need a readable summary layer rather than point-by-point listening · U11.02.5 View changes caused by interaction must be announced
  • Nearby: U11.02.1 Chart elements need a predictable keyboard traversal order · U11.02.4 Overall trends need a readable summary layer rather than point-by-point listening
  • Search terms: hierarchical navigation · series traversal · chart accessibility pattern

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U11.02.2