Creating accessible bar charts
Web site bar charts often consist of a fancy image exported from Microsoft Excel. If you are lucky someone wrote an alt-text explaining what the chart is about. It is time to stop doing that. In this article I show you how you can make an accessible bar chart without sacrificing visual pizzazz.
In this short article we’ll have a look at why image based charts are bad and what you can do about it.
Bar charts are used to give the user a visual overview of how values for something relate to each other. It also enables users to make their own comparisons of data items.
Most charts you find on the web today have been created in some sort of spreadsheet software such as Microsoft Excel or are automatically generated from data on the server. A confession: throughout the years I have implemented numerous chart components in software solutions for clients. The one thing they usually have in common is that they output images and have been inaccessible for many users.
Why image based charts are bad
We all know that using images to present information is bad for people who can not see images. Even if you add an alt-text explaining what the chart is about it may be difficult to provide a thorough explanation of all values and how they relate to each other. Sometimes it is difficult to automatically create an alt-text if the chart is dynamically created on the server.
The alt-texts for charts I find on the web are usually along the lines of “Bar chart showing GDP per capita”. As you can understand, this is close to useless information. But even if the author were to provide a thorough description of the chart data it would be difficult to get the information I am looking for. A long alt-text is a linear representation of the chart data which makes it difficult to “scan” the information.
What we want from a bar chart
Sighted users get a lot of information from a chart. They can scan the chart with their eyes and easily compare values for different items. They also get a sense of the difference between values – something which may help understanding the point the author is trying to make.
A lot of chart data is tabular by nature. One of the most common chart types used to present tabular data is the bar chart. On the web we use the table element to present tabular data (and avoid using it for layout!).
Here is what we would like to achieve:
- Present data in an accessible and browsable way for as many users as possible.
- Not give up visual pizzazz for sighted users.
- Stay compatible with server side creation of the chart from dynamic data.
A proposed solution
I would have preferred to make a chart in SVG but we have to accept that SVG is not here yet. So, let’s try to make a bar chart by doing some minor modifications to a plain html table. If we keep data in a table we maintain accessibility for screen reader software that allows the user to navigate back and forth between cells.
The accessible bar chart is here. It should be fairly obvious how it is made and how you can extend it. It would be easy to add more data series for example. Bar widths are calculated relative to the largest value in the chart. This can be done automatically on the server side for dynamic data. Using CSS it is possible to make the chart even more advanced.
I hope this can be of use to you.
nice one. a while ago i tinkered with doing something along those lines purely via tables+CSS (without any image elements in the markup), but my link CSS bar graphs experiment doesn’t play ball with internet explorer, and i gave up on it after a few hours of trying to kick it into submission…
Neat! Very neat implementation. I look forward to try this out soon. And it does work perfectly with IE too.
And I made a post on mine and used your table hope that is okie.
Awesome idea! I can’t wait to try it out.
Have you done any user testing with people who use screen readers to get their reactions?
Clever and effective accessible development. Nice one.
This is great, but it’s just crying out to have the img elements removed and replaced with CSS. Embedded rather than inline styles would provide the final seperation of display and data while still keeping the server processing down to one page serve.
Nice work :)
Justin, a screen reader user will find an ordinary table which they can navigate.
Andrew, you can replace the bar image element with a div (or multiple divs if you want fancy corners). Just make sure that it is printable (most people have “print background colors and images” turned off). However, using images you get one more level of fallback support. Turning off CSS will still produce a bar chart in most browsers (even in my phone!).
Amit, absolutely! All texts on this site are under a Creative Commons license and the whole idea is to inspire you to improve it further.
Here’s an example of a vertical bar chart I did awhile ago:http://cssirc.com/efnet/codes.asp?code=23
I used lists to create the bars. I think it’s a bit more semantic.
mmmbeer, how do you connect labels to your values? Your example does not explain what “33%” is. Almost all bar charts are created from matrix data where each value is connected to a label.
mmmbeer’s example could probably be made a tad more structural by using the (ever abused) definition list element, i suppose…but yes, (tabular) data should be in a table, period.
I like your site very much!! The design is very beautiful. I wonder to know wether i can use your css file in my personal site?
I’ve done bar charts using this techniqe before, though it is very good to have an excellent example like this to show others that haven’t.
Very nice.
I imagine one variation could be to put the number in the alt text, if you don’t need or want the textual value to appear next to the image.
One other important advantage your technique has from an accessibility perspective (which I don’t think you mentioned explicitly) is the inherent resizeability of your approach compared to images. (You can try to specify image dimensions in ems or something so it will resize but if there is text in the image it won’t resize well.)
(Another possibility is to provide alt text and use DOM Scripting to add the value based on the alt text, though this might look odd where images are disabled but JavaScript is not. This suggestion might only be useful for intranets where computer/browser configurations are often controlled.)
Excellent. Works fine with a screen reader – you do indeed get a simple table which is quite accessible.
Great work!
Nice one, but wouldn’t you consider marking the horizontal headers, ie the countries’ names, as <th scope=”row”>?
i thought this site would give me a link to make a graph but it didnt
I find interesting the fact of transforming it in an high interactive version getting it’s data. Here the example from your chart.
You need a link to make a graph on here. Although the article was informative.
I’ve been working on horizontal bar charts from tables, with arbitrary end-points. Have others found a good way to do this? My efforts are in the link.