New: Full keyboard navigation and dynamic font scaling

When you’re creating a chart, map, or table with the Datawrapper app, you want as many of your readers as possible to understand it. That’s why accessibility has always been a big priority for us. Our automatic colorblind check has flagged data visualizations since 2018, and each Datawrapper visualization you embed benefits from our automatic color contrast algorithm, fallback description, support for even old browser versions, and semantically correct HTML.

Now we’ve improved the accessibility of Datawrapper visualizations even further, with better keyboard navigation for embedded visualizations and support for dynamic font sizes.

Navigate to any data point in a visualization, just by keyboard

In embedded visualizations, every interaction that’s possible with a mouse is now also possible with a keyboard: selecting an item in a legend to highlight corresponding data elements, zooming, searching, etc. All of this is possible by using Tab, Enter, Esc, and the arrow keys →, ←, ↑, and ↓.

To let keyboard users access any tooltip, we also added a chart explorer. It shows up when readers navigate to the main plot area of a Datawrapper visualization with their keyboard. In the chart explorer, they can use the arrow keys to move to the data point they’re interested in.

We added the chart explorer to every interactive visualization type. With this new feature, keyboard users can navigate…

• freely in any directions to find the closest data point (in scatterplots and maps). In zoomed-in maps, the map view moves to the focused regions, so that it’s always visible.

• through data points along one axis and within series (in lines, areas, dual-axis, stacked columns, and bar charts).

• through data points along the horizontal axis only (in waterfall, small multiple charts, columns and grouped columns charts).

Let screen readers read out every data point

Our new keyboard features work great with screen readers like VoiceOver, NVDA, and JAWS and their modifier keys. The chart explorer makes it possible for screen reader users to access the data in any vis type – even those with with often dense data, like maps or scatter plots – directly in the visualization.

Our new chart explorer isn’t the only option for screen reader users. As before, you can add an alternative description to a visualization and let readers download the underlying data themselves. We’ve also improved our automatic fallback descriptions, which read out information and annotations about your embedded Datawrapper visualization.

Let your readers increase the font size in embedded visualizations

Some of your readers set a larger default font size in their browser to improve readability. If you have a custom theme for your Datawrapper visualizations and it uses relative font units (rem, em, %), your visualizations will now scale accordingly so labels stay legible for those users.

When text gets bigger, it takes up more space. In embedded Datawrapper visualizations, overlapping text (value labels, for example) is automatically detected and avoided where possible.

You can learn more about dynamic font scaling and how to set it up in this Academy article.

We’ll continue to improve the accessibility of Datawrapper visualizations. If you have any feedback or questions on the topic, we'd love to hear from you at support@datawrapper.de.