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

Approach

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.

Problem

Column headers are removed as a reference for the data cells when assigning position: absolute on the ‹thead›, ‹tr›, or ‹th› tags.
Table foot (‹tfoot›) is not supported by screen readers.

Solutions

Repeat the ‹thead› content below the chart (a hack I used for a while). Read details about these problems/solutions here.
Assign a span with position absolute around the content within each ‹th› (what I used).

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.