Semantic representation of a chart.

Answer 1

Whats wrong with the image?

Most times when you see chart information on the Web its a generated .jpg or .png.

Have all those designers got something wrong?

Any attempt to draw the chart using tables and backgroud colours will not be intelligable to a sight impaired person, and, in all probability will not render correctly on a browser that cannot handle images.

Use the image and have an "alt" text with a real English description "A chart showing ACME product costs only $49 compared with competitors: Rental Company 4 at $51 .......

Answer 2

Well, a chart is a graphical element, I assume you want the data to be accessible to both text-only browsers and search engines (?): in this case using a <table> for the data presented in a graph is actually correct. I know a lot of people is scared of tables, because all the talk about "table-less" design. But using tables for tabular data is what the tables was intended for.

I would have put a table below (or above, besides etc.) the chart image, with the data the table displays. A chart is good for visualizing differences, and not so good for seeing the actual values; therefore a table as well is a nice supplement to the graphics.

If the chart is not very complex (as this sample) you could also just add an alt-text with a plain english description of the chart, something like this:

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

A text reader should have no problems reading this in a meaningful way.

Answer 3

I seem to remember some useful posts on this subject. You might find that in the end a simple image is best from a cost-benefit point of view, but this article will tell you all you could ever want to know about using html and css to draw bar graphs.

By coincidence, after posting this I looked at everyblock.com yesterday and noticed they have a particularly good implementation of graphs in html/css which would be worth looking at.

Answer 4

You could also consider having just a table in your HTML & then using Javascript to generate the table: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/

But for a chart like the image you supplied - where it's just a marketing image and the values have no real meaning - then just a good alt text description should be fine.

Answer 5

See the great article on http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55">CSS for Bar Graphs on the Apples to Oranges site.

(Edit: it's the same link posted by @Sam Murray-Sutton above - sorry)