Bar Chart

View the full library of accessibility solutions.

This table shows internet usage and any overages by month
Nov. 1 - Nov. 30, 2013 Dec. 1 - Dec. 31, 2013 Jan. 1 - Jan. 31, 2014 Feb. 1 - Feb. 28, 2014
400GBout of 300GB 310GBout of 300GB 300GBout of 300GB 150GBout of 100GB


This bar chart reads as a table in screen-readers because it is a table. It is a table that leverages CSS to look like a bar chart. It uses absolutely no js.

This chart assumes that certain styles (mainly dimensional styles) that are relevant to a particular chart would be generated on the server side so that the css can stay as generic as possible.

Stumbling Blocks and Solutions

I needed to place column headings (‹thead› content) below the chart, under each corresponding bar.



Dynamic Solution with JS

Here is a more complex bar chart which uses most of the solutions above. It uses JS to populate the table and add inline styles when the data is injected and min / max values and intervals cannot be assumed.