How we make sure our charts, maps and tables are accessible
Accessibility means that people with (temporary or age-related) disabilities can still access the same information as non-disabled people. If you care about the fact that as many people as possible can read and understand your content, you care about accessibility. We do, too.
Naturally, accessibility is a tricky issue for charts and maps. Data visualizations are visual by default. But we do our best to include as many measures as we can to ensure that no one is excluded from reading a Datawrapper visualization.
Below we outline the features that we have implemented towards accessibility:
Colorblind check for users
To help users avoid creating charts/maps that are not legible for readers with color vision deficiencies, we offer a color blindness checker that warns you if the colors in your chart/map would not be distinguishable by those with any of the three main types of color vision deficiency. You can read more about this feature on our blog.
Data download for readers
When creating a chart, map or table, you can decide if you want to include a link in the footer that allows the reader to download the data. It will say "Get the data" in the language of your choice. This means that a reader with a visual impairment has the possibility to download the data so that they can get it to read or interpreted to them by a screen reader in the way that suits their needs.
Alternative descriptions
For every Datawrapper chart, map, or table, you can write alternative text descriptions that screen readers will read out. This option waits for you in step 3: Visualize, in the Annotate tab.
Writing an alternative description won’t take more than a couple of minutes, but it will be a tremendous help to readers with visual impairments.
Note that annotations and information about the chart are not read out anymore once you put in an alternative chart/map description, because they both might be redundant with your description. Under the hood, Datawrapper places the alternative description inside the HTML code of the chart and sets the chart body, including annotations, to aria-hidden.
You’re not sure what to write in such an alternative description? We put together an Academy guide on what to consider when writing alternative descriptions.
Fallback descriptions of visualizations
In a perfect world, you and every other Datawrapper user write alternative descriptions for every chart and map you create. In reality, a lot of visualizations will still be published without alternative descriptions. That’s why we’ve started to experiment with what screen readers read out by default.
- The visualization type will be announced by screen readers, including how many e.g. lines/symbols are shows (e.g., “Line chart with 7 lines”).
- Axis and grid labels are not spelled out on most screen readers anymore. Instead, there is a summary about the axis (e.g., “Horizontal date axis, ranging from January 2019 to March 2021“).
- Categorical color legends are declared as such. Instead of just reading out the category labels, screen readers will announce them with “Category legend with x items. The items are…”
- Annotations will be announced with “This chart has one annotation.” before they’re read out.
So far, we only rolled out these new automatic descriptions for line charts and scatter plots.
Here's an example of a scatter plot and what a screen reader will read out:
The richer, the healthier
GDP per person adjusted for differences in purchasing power (in 2011 international dollars) and life expectancy in years for selected countries, 2018. The bigger a circle, the more people live in a country.
Category legend with 4 items. The items are Asia & Australia, Africa, North America, Europe.
Scatter plot with 184 symbols.
The horizontal axis is labeled as “GDP per capita”, the vertical axis is labeled as “Life expectancy”.
This chart has one annotation: China’s life expectancy and GDP per capita are higher than India’s.
Source (link) Gapminder. (link) Get the data. (link) Created with Datawrapper.
To learn more, visit our article "How (and why) to set up custom fields".