What TanStack Charts does for maps on its own, and what you add so that everyone can read them.
What you get
A named chart. ariaLabel is required, and the chart is exposed as an image with that name. ariaDescription adds a longer description.
Keyboard navigation, on by default. Tab moves into the chart and focuses the first region. Arrow keys move between them, and Home and End jump to the first and the last. Enter or Space pins a sticky tooltip, and Escape closes it.
The tooltip is announced to screen readers as it changes, so a keyboard user hears the values of the focused region.
A visible focus ring in the theme's focus color, shown for keyboard focus only.
Reduced motion. Animated charts skip their animation when the reader has asked for less motion.
An interactive legend made of real buttons, each with a pressed state, when you use interactiveColorLegend.
What you add
A label that says what the chart shows, its unit and its period. "Unemployment rate by county, United States" works. "Map" does not.
A visible title, and a subtitle with the unit and the period, in HTML next to the chart.
The exact values another way, when they matter: a table under the chart, behind a toggle, or a download.
A second signal besides color for every series or part.
A keyboard path for every control you add yourself, such as a series filter or a period picker.
Name and describe the chart
Keep the label short and put the takeaway in the description. Do not put every value into the name: a screen reader reads it in one breath.
<Chart
definition={definition}
ariaLabel="Unemployment rate by county, United States"
ariaDescription="The median county is at 5%. Imperial County, California, is highest at 26.4%."
/>
Give the values as a table
A table is the most reliable way to give exact values to everyone, including people who zoom far in or print the page. Render the same array the chart reads with the kit's Table, under the chart or behind a "Show as table" switch. When the values are only an illustration, a one sentence summary is enough.
Do not rely on color
Use one hue from light to dark, so the order of the bands still reads in grayscale.
Show the legend with the range of every band, not only the colors.
Give regions with no data a neutral color or a pattern, and name it in the legend.
Marks need enough contrast with the background. Check light colors from a palette against the page in light and dark mode.
Give the regions as a sortable table
A map is hard to read with a screen reader, and small regions are hard to reach with the keyboard or a finger. Put a table of the same regions under the map, or behind a "Show as table" switch. Let the reader sort it by name and by value.
import { Table } from "@/components/ui/table"
<Table
rowKey="id"
dataSource={rows}
pagination={{ pageSize: 20 }}
columns={[
{
title: "County",
dataIndex: "county",
sorter: (a, b) => a.county.localeCompare(b.county),
},
{
title: "Unemployment rate",
dataIndex: "rate",
align: "right",
render: (rate) => `${rate}%`,
sorter: (a, b) => a.rate - b.rate,
defaultSortOrder: "descend",
},
]}
/>
Build the table from the same rows you join to the map, and list the regions with no data as such, not as zero.
Keep base layers out of the tab order
Land, borders, graticules and the globe's outline carry no data. Wrap them in decorative so arrow keys move only between the regions that have a value, and the tooltip never opens on a background shape.
Turning the keyboard off
A static chart with no tooltip can pass keyboard: false in the second argument of defineChart, so it does not add a tab stop. Keep it on for any chart that shows values on hover: otherwise keyboard users never see them.
Check it
Tab into the chart and read every region with the arrow keys.
Listen to it with a screen reader.
Zoom the page to 400% and confirm the values are still there.
View it in grayscale and confirm the series are still apart.
The Accessibility guideline has the principles that apply to every chart.