|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.
- 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.
- 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.