How to write good alternative descriptions for your data visualization
So how do you write something short that conveys the whole meaning of a visualization? You probably can’t. That doesn’t mean that you shouldn’t try.
– Amy Cesal, data visualization designer
Writing an alternative description only takes a couple of minutes. They are a great help if you want to make sure readers with visual impairments don't miss out on relevant content in your data visualization. This article gives you some tips on how to write good alt text for a better screen reader experience.
What are alt descriptions?
Alternative text, also known as alt text, is a written description that allows you to convey the meaning of visual elements, such as images, visualizations or other media, to help users with disabilities understand the content they are missing.
This attribute is read aloud by screen readers, which is the assistive technology used by people with visual impairments.
How can you add alt descriptions in Datawrapper?
To add an alternative description in Datawrapper, go to step 3: Visualize. In the Annotate tab, enter your description in the Alternative description for screen readers field.
General tips
- Use clear language and structure your text: when writing descriptions, you should use plain language to make sure your readers understand your text as quickly, easily, and thoroughly as possible.
- Keep it accurate and concise: avoid including any information that is not essential and that could overwhelm your readers. The header and footer (including the title, description, data source, byline, notes etc.) are being read out by the screen reader, so you don't need to worry about repeating the same points. Instead, you should try to describe the crucial information in your visualization.
- Allow your readers to download your data: when creating a chart, map or table in Datawrapper, you can decide if you want to include a link in the footer that allows the reader to download the data. If you select this option in the Design tab, your visualization will include a link that says "Get the data". This means that a reader with a visual impairment can download the data and have it read or interpreted to them by a screen reader.
You can use HTML elements in your alt descriptions to e.g. <em>emphasize text</em>
, add a table or a <a href="https://link.yay">link</a>
or to let the screen reader pronounce a phrase or word in another language: <span lang="es">Barcelona</span>
.
To structure your text, you can also make use of HTML. Maybe you want to summarize the most crucial data points in a short table. Perhaps, there's a URL with more accessible information that you wish to link to.
What to include in your alt text
Data visualization designer Amy Cesal came up with this formula on what you should include in the alt text for your graphic:
alt=" Chart type of type of data where reason for including chart"
Let's break it down:
- Chart type: including the chart type can help those users with limited vision who may only see part of it.
- Type of data: here, you should describe what you see in your visualization. For that, it can help to look at your axis labels. Example: Price history in USD/kWh for different renewable energies and fossil fuels from 2010 to 2023.
- Reason for including the chart: this is what Amy describes as the "why": what your visualization shows that is meaningful. Example: In 2020, solar energy became cheaper than fossil fuels.
This formula is not set in stone. You could also argue that any mention of the chart type is unnecessary: The visualization is a way of representing the data; if words are used instead to describe the data, there's no need to talk about visual elements at all.
Depending on what makes the most sense for you and the data, and depending on organization-internal accessibility instructions, you might want to choose Amy's approach, or you might not want to mention the chart type.
Example 1: a static chart
When working with a chart that won't get updated, you can write a more detailed description. Let's use as an example this split bars chart:
An alternative description for this chart could be:
A split bars chart of different types of milk's (dairy and plant-based) environmental impact, where cow's milk scores significantly worst in carbon emissions, land use, and water use than the other milk alternatives. Cow's milk produces two times more carbon emissions, uses nine times more land, and twice the water that rice milk uses. Rice milk is the second most contaminating type of milk in terms of carbon emissions.
Example 2: a live-updating chart
With visualizations that will likely get updated frequently, you should try to give a general description, as well as highlighting some relevant data values and trends. Make sure you update your alt text every time the highlight in your chart changes. For this example, let's use a line chart:
An alternative description for this chart could be:
A line chart of historical Bitcoin price in USD and volume of bitcoins traded from January 2017 to January 2021, where Bitcoin reached its highest price ever on January 8th, 2021, when it was traded for over $40,600. The second highest peak happened at the end of 2017, a year in which Bitcoin went from $830 to $19,300. The current value, on January 13th, is $34,700. The volume of Bitcoin traded also saw its highest peak in January 2021, topping $123 billion traded.
Example 3: a map
When writing an alt description for a map, you should avoid focusing on the visual elements and highlight the important message instead that your map conveys. Let's have a look at the choropleth map from this Weekly Chart here:
An alternative description for this chart could be:
A choropleth map of the proportion of women in national parliaments in the world in 2020, where Rwanda stands out as the country with the highest percentage of women (61%) in a national parliament, followed by Bolivia and Cuba, with a 53%. Papua New Guinea is the country that scored the worst with 0% of women in their parliament.
At the end of this description, you could also include some countries that you think are relevant to your readers.