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.
This feature is layout-scoped, as opposed to being a setting. If you have a Custom plan, you need to tell our support team at email@example.com that you would like to have it turned on for your layout.
ARIA labels in embed codes
"ARIA" stands for "Accessible Rich Internet Applications". The embed code that Datawrapper generates automatically includes an aria-label that contains the name of the chart/map type. So for a line chart, the aria-label will say "Interactive line chart", while for a choropleth map it might say "France departments choropleth map".
The embed code will also include the title of the chart, map, or table you're creating.
This is how the beginning of a Datawrapper embed code looks like:
<iframe title="Global land temperature in July, 1753-2015" aria-label="Interactive line chart" id="datawrapper-chart-...
You can also customize your aria-label by creating a custom embed code. Visit our developer docs on custom placeholders for more details.
Chart descriptions in embed codes
If your organization is using Datawrapper on a Custom or Enterprise plan, you can set up a custom text field "chart description" that will display in the Annotate tab. You can ask chart creators to fill it out:
If they do this and publish it, the chart description will show up in the embed code.
To learn more, visit our article "How (and why) to set up custom fields".