Ashley Sheridan​.co.uk

Accessible Graphs and Charts

Posted on

If you have a lot of data that you need to convey to your audience you could use a table, but a graph or chart can help convey the same information much more simply and quickly to your readers. However, we need to be careful that the graphs that we create are still available to our whole audience. There are some simple ways that we can ensure this.

Contents

Text Alternatives

It's very common for charts to be included on a page with a standard <img> tag, but there are a few different ways to add a text alternative to it.

Alt Text

Adding an alt attribute to the image is the main way to make an image more accessible. Not only is that text available to screen readers, but users on a slow connection will see that text before the image loads in.

Good alt text should be a replacement for the image it belongs to. This might be a description of what the image shows, or it could be the literal text in an image. Consider this example of a graph indicating a persons primary colour preference:

Pie chart showing preference for red (44.44%), green (33.33%), and blue (22.22%) of a fictional group of 45 people

The actual alt text I used here was "Pie chart showing preference for red (44.44%), green (33.33%), and blue (22.22%) of a fictional group of 45 people". This works perfectly as a replacement for the image and conveys the meaning of the image.

Other technically correct but useless (because they aren't a good replacement to the image) alt text values could be:

To help get your alt text right, disable images in your browser. If things don't make much sense to you when you're reading through the content, then other people are going to struggle too.

Captions

Sometimes there might be additional information that you want to convey to your users that can't be put into the image or alt text, or doesn't make much sense. For example, a survey might have its raw results available, so a chart based on this raw data might want to include that link in a format that allows the user to copy and paste it for themselves. If the link is in the alt text, or is in the image itself, almost nobody can use it.

The caption doesn't have to just be a single line of text though, it could even be a small table of results that the graph was based on. For example, the previous colour preference graph could also include a small table of the values to make it easier for people to refer back to the details.

<figure> <img src="favourite-colours.png" alt="Pie chart showing preference for primary colours"/> <figcaption> <table> <caption>Favourite primary colours of 45 people asked in public</caption> <tr> <th>Colour</th><th>Number of Responsdants</th> </tr> <tr> <td>Red</td><td>20</td> </tr> <tr> <td>Green</td><td>15</td> </tr> <tr> <td>Blue</td><td>10</td> </tr> </table> </figcaption> </figure>

You might have noticed here that I changed the alt text on the image for this example. This was to remove the redundant duplication of information, and here the information that the image is conveying has changed slightly because it's presented adjacent to the graph.

Long Descriptions

Sometimes, the information that you're conveying in a simple graph is just too much for a caption or alt text. When this occurs, you can fall back to the longdesc attribute of the <img> tag to link out to a page which can better describe in great detail exactly what the chart is meant to convey. For example, an infographic often conveys a lot of complex information in an easy to digest manner. Howver, a longdesc could be used to link out to a more verbose page of information.

It should be noted that support for longdesc is very low and then usually only with plugins or registry key changes. You might actually be better including the link in a caption for the image instead.

Graphs in Markup

Images are good for graphs, but they're not perfect. They look terrible when zoomed in, and it's very difficult to make them interactive in an accessible way.

The typical choices for creating graphs that are more accessible and allow zooming are to use either HTML or SVG. Obviously, the former is more simple, but that does limit the types of graphs and charts that can easily (and accessibly) be created.

HTML Graphs

HTML lends itself very well to bar graphs, being particularly blocky in nature. A good choice for the bar graph would be to use a