Accessible Data Visualization with Web Standards

by Wilson Miner

31 Reader Comments

Back to the Article
  1. I’d like to see how you’d solve a pie-chart ;-)

    Question: why not ordered list for the charts sorted by value? And have you considered using definition lists? I think a definition list would show the relation between data and value, where your spans have no semantics.

    Copy & paste the code below to embed this comment.
  2. Unless the values are in a specific order (like chronological or ranking), the unordered list is accurate. When I’m explaining that to someone I always ask them “If I scramble the order of these list items, does it make a difference?”.

    I made a PHP based graph (styling a UL) similar to this a little while ago: http://www.csskarma.com/lab called “dynamic CSS graph and table”.

    I like this technique; It takes a lot of the multidimensional table attributes like ‘axis’ and matching ‘headers’ to ID’s out of the equation, and should leave you with some cleaner code to deal with.

    my2cents

    Copy & paste the code below to embed this comment.
  3. I’m not sure why I made my name the subject of that post… sorry about that

    Copy & paste the code below to embed this comment.
  4. At the risk of sounding whiny, I think it would have been nice to mention using canvas and SVG as alternative methods for data visualization (instead of just Flash).

    Several libraries already exist for this purpose, and although they may not all provide full cross-browser support, I would personally prefer to use them over Flash.

    Copy & paste the code below to embed this comment.
  5. This reminds me a bit of HTML5’s “˜meter’ element: http://www.whatwg.org/specs/web-apps/current-work/#the-meter

    I dont like the markup, though: every “˜span’ is one “˜span’ too much. If only “˜display: block’ for the table elements worked reliably across browsers.

    Copy & paste the code below to embed this comment.
  6. http://www.alistapart.com/d/accessibledata/example-barchart.html

    is tabular data.

    Copy & paste the code below to embed this comment.
  7. Sarven Capadisli said:

    example-barchart.html is tabular data.

    Saren, good point, but from paragraph 6 of the article:

    If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure.

    Copy & paste the code below to embed this comment.
  8. I built a javascript pie chart some years ago. Nice to see it is still being used:

    http://qsuper.qld.gov.au/public/members/member_services/calculators/tools/investment_choice.asp

    It degrades nicely as it simply disappears. :)

    Copy & paste the code below to embed this comment.
  9. @Jeffrey Zeldman:

    I disagree. First of all, the nature of that content as a whole is best fit for tabular data. Whether one wishes to navigate through that information or not is independent.

    The main problem that I see here is dumping the content in chunks; building a navigation first and then adding new markup to fit into the existing markup.

    This approach is wrong in my opinion because the content need not be placed in pieces.

    Look at the full content you want to place in a document and then find the most suitable HTML elements to encapsulate that data.

    Copy & paste the code below to embed this comment.
  10. “Obviously, these charts are simple, and these techniques aren’t the best option in every situation. When you need semantically rich markup—when you have a large set of data or a lot of categories to compare, nothing beats a table. For fancy visualizations like scatterplots and 3D pie charts, you might choose some kind of server-side tool to generate images. For extra interactivity and animation, Flash is probably the way to go.”

    i enjoyed this entry. finally a ALA article without philosophical fluffs in a while.

    while i understand your article is to demonstrate the usage of css to create accessible basic charts, but i question the practicality of it. i almost feel like you’re doing it simply for the purpose of demostration. as you said above, for more complex charts (piecharts, interaction, etc) it may require an official charting method, may it be server side or client side.

    in my experience building web apps, or public sites, complex charts, or interaction is always required. so it’s hard to do charts in pure css alone. and building a set of code for css only, and another for more complex charts is just not efficient. so i most likely will end up doing charts the non css way, at least for now.

    Copy & paste the code below to embed this comment.
  11. …the nature of that content as a whole is best fit for tabular data. Whether one wishes to navigate through that information or not is independent.

    I’m curious: how would you mark up and style a table of data where the bars and such need to be interactive, as in clickable links?

    Copy & paste the code below to embed this comment.
  12. Jin Y said…

    while i understand your article is to demonstrate the usage of css to create accessible basic charts, but i question the practicality of it. i almost feel like you’re doing it simply for the purpose of demostration.

    I should have mentioned this in the article itself, but all the techniques I described are in use on EveryBlock, the local news project I’m currently working on. You can see an example the timeline and bar charts in action on this “overview of crimes in Chicago”:http://chicago.everyblock.com/crime/ and the sparklines on this “breakdown of crimes by neighborhood”:http://chicago.everyblock.com/crime/locations/neighborhoods/.

    Copy & paste the code below to embed this comment.
  13. Wilson, the charts look very nice on EveryBlock. However, to further my point from before, what would your approach be if a piechart/scatterchart is to be added to the site?

    If from the project planning phase, it’s determined that the the only type of chart the site will ever shown is bar charts that can be done with the css techniques you presented, then that’s fine. (it could very well be the case with the project you are working on). however, for the sake of scalability and consistency, i use a designated charting software instead of css. i’m not dismissing the benefit of css charting, however i feel it’s not efficient to have one set of css charting code, while using a 3rd party software to deal with the others. just my two cents.

    Copy & paste the code below to embed this comment.
  14. @Eric Meyer:
    http://www.csarven.ca/labs/html/horizontal_bar_chart.html

    Notes:

    • Tested only in Firefox
    • The visual/interaction is not a 1-1 replicate of the example that is used in this article but I think it is fairly close.
    • The whole row is not an anchor
    • I’m certain that the CSS can be cleaned up further and possibly have it even more closer to the example (I can’t invest more time into this at this time)

    :)

    Copy & paste the code below to embed this comment.
  15. Loved the example, as a newcomer to standards and when and why you should use them this is a great idea. thanks for writing the article I can’t wait to try it out.

    Copy & paste the code below to embed this comment.
  16. Who prints anymore? Well actually a lot of people still like to print charts out on real paper. These charts don’t print nicely at all…any ideas on how you would handle that?

    Copy & paste the code below to embed this comment.
  17. Those ideas are absolute genius! This kind of article is exactly why I read ALA – real, practical ideas that I can put into practice :)

    The first two charts – the bar chart and the timeline – are a fantastic idea. Using the markup of a table but representing it as a chart by CSS is much better than referencing an image and having to provide alt text or longdesc. My only concern is whether browsers or assistive technologies with inferior CSS capabilites will be able to make sense of it. I hope so!

    I’m not so sure about the final example. This seems to be an incredibly complicated way to create a very basic chart. In this case, I think I would just create the charts as images.

    Copy & paste the code below to embed this comment.
  18. Robin Hood said…

    These charts don’t print nicely at all”¦any ideas on how you would handle that?

    The example styles are scoped to media=“screen” since I decided it was out of the scope of the article to get into print styles. If you just change the media attribute on these styles to “all” they actually print pretty well, as long as the user has background printing turned on in their browser. Since you can’t rely on that, I’d recommend setting a border on the bars in a separate print style to make sure the bar shows up.

    Copy & paste the code below to embed this comment.
  19. Everyone seems to be favoring Draconian semantics and edge cases rather than practical solutions in appropriate situations. Nobody said this approach was going to scale for all cases, but it works well in a lot of them.

    I love it. It’s the first design article on ALA that designers can use immediately and with visually pleasing results. Keep up the good work, Wilson.

    Copy & paste the code below to embed this comment.
  20. I just noticed that the “Google Chart API”:http://code.google.com/apis/chart/#sparkline allows you to insert “Sparklines”:http://en.wikipedia.org/wiki/Sparklines easily… Yea Google!

    Copy & paste the code below to embed this comment.
  21. “Flot”:http://code.google.com/p/flot/ – a “jQuery”:http://jquery.com plugin is a fantastically simple and beautiful option for rendering line graphs. The “examples”:http://people.iola.dk/olau/flot/examples provided give a good idea of how rich and powerful it can be too.

    Copy & paste the code below to embed this comment.
  22. Nicely done, but unfortunately it doesn’t meet the requirements set forth in the article—namely, having the whole “row” (or “data atom” or whatever) be clickable.  You got close, but without either a good deal of JavaScript or a full working implementation of XHTML 2, I don’t think it’s possible to do with valid table markup.

    It’s a shame we’re still having to make these kinds of compromises, but there it is.

    Copy & paste the code below to embed this comment.
  23. This is nicely done. There are some other examples on the web of accessible diagrams and visual aids:

    Eric Meyer’s Bar Graph: http://meyerweb.com/eric/css/edge/bargraph/demo-table.html

    @ Blaise Kal
    And my Venn Diagram (which could be used for a pie chart as well) that I posted back in Sept. of 2007:
    http://www.heyokadesign.com/news.asp?post=more-accessible-venn-diagram

    Something to think about, however, is that in certain situations the use of the ‘dreaded table’ can have more meaning.

    Copy & paste the code below to embed this comment.
  24. Despite the issue of whether data belongs in a table or not I think this is a great example especially for developers.  I deal with very large data sets and markup of this nature gives clients exactly what they want rather than a giant table to endlessly scroll through.

    Copy & paste the code below to embed this comment.
  25. that was gr8 info ,thanks

    Copy & paste the code below to embed this comment.
  26. I wonder if they can get that programed into my new self-destructing IM service from Bigstring.  Then all my needs will be met.

    Copy & paste the code below to embed this comment.
  27. If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure. My new venture http://www.shadoz.com/css-template-07.htm

    Copy & paste the code below to embed this comment.
  28. Beautifully displayed.

    Copy & paste the code below to embed this comment.
  29. Nice idea and so simple to implement in php.

    Copy & paste the code below to embed this comment.
  30. you can see it in PHP here:
    http://www.chausstran.com/immobilien/stats.php?id=2

    Copy & paste the code below to embed this comment.
  31. please see

    http://www.jjlg.com/weblog/

    It’s updated daily with web log- statistics about visits to my eponymous site. The use of the term “log” is a pun, because the scale is log-arithmic, and it is about a “log”.

    Barcharts and sparklines are selected from a two-dimensional index grid, by time and by rank of number of hits, to what page or image – and from what IP address. What comes out is a classic Wiebel distribution with a long tail. Hover over any barchart and get a tooltip with all the juicy data. I find it all very interesting – and enjoyable.

    Thanks for the excellent writing, great article, and it really helped. I just decided to make all links hover differently and changing one line of CSS, the entire site behaves better, including the barcharts and sparklines in the weblog page.

    Keep up the good work, let’s have more – a whole-enchilada CSS-driven minimalist data-graphing tool. Or did you already and I missed it?

    Have you seen http://interface.fh-potsdam.de/infodesignpatterns/patterns.php ?

    Copy & paste the code below to embed this comment.