Interactive charts need an equivalent data table as an alternative presentation

What it is

A chart that can be filtered, that can select a single bar, that can toggle series, cannot be covered by a frozen paragraph. Interactive charts need an equivalent data table: rows and columns holding the numbers the chart is currently presenting, readable, searchable, fully keyboard-reachable, and updating when the filter changes. The long description reports the trend; the table carries the queryable data.

Equivalent means the current view, not a dump of the warehouse. If the chart at this moment shows three products in 2023, the table should be those three rows, not ten years of history poured out beside it.

Why it happens

Interaction slices a dataset into a current view. People who can see the chart ask “what is this bar?” with a pointer; people who cannot need a non-graphic door to the same question. A static long description written before the filter lies after the filter. A table exposes values by row and column: assistive technology has cell navigation, people who can see but cannot read the chart can sort and search, and keyboard users need not hit a 3-pixel bar.

If table and chart drift apart, the alternative becomes a second document. Hiding a series, changing time grain, drilling down — each of these must keep the table’s rows aligned with the chart’s current encoding. Otherwise people think they are reading the chart’s numbers and are reading the previous view’s remains.

Studying it

Give the same interactive chart two conditions: chart plus a static note, versus chart plus a table that updates with the filter. Tasks: read a named series in a named year, compare two products after filtering, export or copy the current view.

Independent variables: presence of an equivalent table, whether the table follows the current filter, whether the table is keyboard-traversable. Dependent variables: task completion, whether post-filter answers still refer to the current view, time to finish.

Walk the table keyboard-only and with a screen reader. “The table exists in the DOM” is not enough; headers must actually mark row/column relationships, or what is read is a heap of uncoordinated numbers. Include third-party chart libraries’ default “data” panels in the sample — many pop only for a pointer and never enter the tab order.

Where it stops holding

A fully static chart with few points is often served by a trend note plus nearby visible numbers; forcing a table adds cognitive noise. Maps, network graphs and 3D scatters cannot keep spatial relations in a grid; the equivalent may be a queryable object list rather than a two-dimensional table. A live ticker that refreshes the table every second will storm the announcement queue; it needs pause, a lower rate, or update-on-request. Confidential settings cannot pour microdata into the page; equivalence should stop at the aggregation the chart already discloses.

Applying it

• For charts that filter, select, or toggle series, provide a data table whose rows and columns match the current view, next to the chart or behind a visible toggle.
• When a filter, a hidden series, or a grain change happens, update the table. Do not leave rows from the previous view.
• Use real header cells so row/column relations can be navigated. Do not fake a table with unsemantic grid divs.
• How to check: keyboard-open a filter, change one condition, then hear or see whether the table now holds the new view, and read a specified cell. If the chart changed and the table did not, or the table never enters tab order, there is no equivalent presentation.

Related

• Same group: J2.12.1 Long descriptions of charts should capture data trends, not only visual appearance · J2.12.2 A long description can sit in nearby visible text or on a linked page · J2.12.4 Writing a long description requires understanding the data behind the graphic, not a post-hoc caption
• Nearby: J2.09 Semantic Structure · J3.01 Keyboard Access · J2.04 Alternative Text
• Search terms: equivalent data table · accessible chart · chart alternative presentation