The Wojo Group recently published an article explaining how to crease CSS Stacked Bar Graphs, i.e. graphs made entirely with HTML and CSS. Somehow this seemed like a good idea at the time. Although the end result is quite satisfactory – as it is semantically correct, displays well and conveys the information – the technique is completely redundant. We already have a perfect mechanism for displaying graphs of any kind, height, length, colour and shape – the img element.

A graph is not something you should try to represent with HTML. Best practice in this case would, IMO, be to store the graph in some handy image format (PNG is recommended) and display it using an img element. This is more semantically correct, takes less time to do, probably works better cross-browser and is a better solution from a screen-reader’s point of view. If you use the alt attribute correctly, that is. Have a look at this extremely simple example, quite adequately matching that of the Wojo Group:

<img src="/wp-content/uploads/wojo-graph.png" alt="Stacked Bar Graph showing something over the course of twelve days">

And in case you wondered, it’ll produce something like this: