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.

Comments

  1. patrick h. lauke says at 2005-02-07 01:02:

    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…

  2. Amit Karmakar says at 2005-02-07 04:02:

    Neat! Very neat implementation. I look forward to try this out soon. And it does work perfectly with IE too.

  3. Amit Karmakar says at 2005-02-08 02:02:

    And I made a post on mine and used your table hope that is okie.

  4. Justin Thorp says at 2005-02-08 03:02:

    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?

  5. Mike Pepper says at 2005-02-08 06:02:

    Clever and effective accessible development. Nice one.

  6. Andrew Krespanis says at 2005-02-08 09:02:

    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 :)

  7. Pete says at 2005-02-08 09:02:

    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.

  8. mmmbeer says at 2005-02-08 22:02:

    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.

  9. Pete says at 2005-02-08 23:02:

    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.

  10. patrick h. lauke says at 2005-02-09 03:02:

    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.

  11. tsing says at 2005-02-09 08:02:

    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?

  12. Lachlan Hunt says at 2005-02-10 08:02:

    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.

  13. Anup says at 2005-04-16 13:04:

    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.)

  14. Rich says at 2005-05-09 18:05:

    Excellent. Works fine with a screen reader – you do indeed get a simple table which is quite accessible.

    Great work!

  15. Alberto Romero says at 2005-05-30 13:05:

    Nice one, but wouldn’t you consider marking the horizontal headers, ie the countries’ names, as <th scope=”row”>?

  16. sport says at 2005-10-14 21:10:

    i thought this site would give me a link to make a graph but it didnt

  17. christian says at 2006-01-09 13:01:

    I find interesting the fact of transforming it in an high interactive version getting it’s data. Here the example from your chart.

  18. Destani says at 2006-03-02 21:03:

    You need a link to make a graph on here. Although the article was informative.

  19. rweait says at 2006-03-24 19:03:

    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.

Trackbacks

Peter Krantz, peter.krantz@giraffe.gmail.com (remove giraffe).