Skip to content
Newer
Older
100644 201 lines (93 sloc) 9.68 KB
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
1
2 <!doctype html>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Accessible CSS Barcharts | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="Update: I am now hosting the bar charts for posterity :) You can also fork it on Github. When I worked on the design for HTML5Readiness, I felt &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/accessible-css-barcharts.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
8f21f85 Site updated at 2011-12-11 02:10:56 UTC
Divya Manian authored
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
20
21 </head>
22
23
cd5e6a9 Site updated at 2011-12-24 06:16:39 UTC
Divya Manian authored
24 <body >
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
69c30f5 Site updated at 2011-12-11 14:45:02 UTC
Divya Manian authored
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
30
31 </header>
9d25e1e Site updated at 2011-12-11 01:21:19 UTC
Divya Manian authored
32 <nav class="sitenav"><a href="/">Home</a>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
35 </nav>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
45 <nav class="article">
46
47 <a class="previous" href="/book-reviews-for-july-part-2.html" title="Book Reviews for July - Part 2">❬</a>
48
49
50 <a class="next" href="/sexy-css3-buttons.html" title="Sexy CSS3 Buttons">❭</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <time datetime="2010-08-16T00:00:00-07:00" pubdate><span class='month'>Aug</span> <span class='day'>16</span> <span class='year'>2010</span></time>
64
65 <h1 class="entry-title"><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p><b>Update:</b> I am now <a href="http://nimbu.in/accessible-bar-charts/">hosting the bar charts</a> for posterity :) You can also <a href="http://github.com/nimbupani/table-bar-chart">fork it on Github</a>.</p>
72
73
74 <p><a href="http://nimbu.in/accessible-bar-charts/"><img src="http://nimbupani.com/files/10kbarchart.png" alt="10kbarchart.png" border="0" width="600" height="409"></a></p>
75
76
77
78
79 <p>When I worked on the design for <a href="http://html5readiness.com">HTML5Readiness</a>, I felt guilty for not using a table to represent the data. So, when the 10K competition came along and I thought it would be a good idea to come up with an accessible and ready-to-use CSS bar-chart. </p>
80
81
82
83
84 <p>I initially thought of asking user for the data and then rendering the chart along with code for the HTML and CSS. But, it did not seem very intuitive (especially expecting the user to imagine the relationship between the data and the graph). I recalled <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#attr-contenteditable">contentEditable</a> was now available in almost all browsers and decided to use that to let the users update the chart with names and values they wanted. As soon as the user finishes editing one of the chart values, the Textarea below updates to show the HTML markup they can copy to use on their own website.</p>
85
86
87
88
89 <p>It was not a very difficult application to develop (given that I could already use jQuery in addition to my 10K of files). Most of my time was spent thinking of how to update the length of the bars dynamically when the user tabs or moves focus from one <code>contenteditable</code> area to the other. I also inlined the edit and delete icons using data URLs and used CSS3 transitions to position the vertical axis and its label. All the text within the barchart is editable, and the bars alter when the value of one is significantly altered from its original value.</p>
90
91
92
93
94 <p>I was pretty pleased with the app: it seemed to work on Opera 10.6, Safari 5, and Firefox 3.6.8. But, you must have guessed it by now, it did not work on IE9. Why, you ask? IE9 does not allow HTML Table elements to be styled with the <code>display</code> property (here is <a href="https://connect.microsoft.com/IE/feedback/details/556576/html-table-elements-cant-be-styled-using-display?wa=wsignin1.0">the bug report</a>, warning: MSN Passport required to view). The bug has been closed with a note stating it is &ldquo;by design&rdquo;. </p>
95
96
97
98
99 <p>No version of IE9 will ever support tables to be styled as anything other than a table. It boggles me that IE 9 team cannot even be bothered to answer why it is &ldquo;by design&rdquo;, given that almost every other browser on the market seems to support it? There are <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element">no restrictions from the HTML5 standard either</a>.</p>
100
101
102
103
104 <p>Anyway, I had to alter the markup, so a <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-dl-element">name-value pair</a> seemed to be the best alternative. So, now it works on <a href="http://10k.aneventapart.com/">all the browsers that the contest mandates it should work on</a>!</p>
105
106
107
108
109 <p>Some people have reported they are unable to edit the data in Firefox on Linux, which seems strange given that it works on Firefox 3.6 on a Mac and PC. I have no Linux machine to test on, but I hope some of those who are reading this can help me with that!</p>
110
111
112
113
114 <p><span class=strike>Meanwhile, if this application seems useful, do <a href="http://10k.aneventapart.com/entry/details/102">vote</a>!</span> The results are out, and I did not win :(</p>
115
116
117
118 </div>
119
120 <footer>
121 <p class="meta">This post was posted by
122
123
124 <a href="/about.html">Divya Manian</a>
125 on
126
127
128
129
130
131
132 <time datetime="2010-08-16T00:00:00-07:00" pubdate><span class='month'>Aug</span> <span class='day'>16</span> <span class='year'>2010</span></time> in
133
134 <span class="categories">
135
136 <a class='category' href='/categories/web-development/'>Web Development</a>
137
138 </span>
139
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
140 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-08-16-accessible-css-barcharts.md">please send a pull request</a>.
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
141 </p>
142 </footer>
143 </article>
144
145 <section>
146 <h1>Comments</h1>
147 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
148 </div>
149 </section>
150
151
152 </div>
153 </div>
154 <aside id="articles">
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
155 <p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
156 <h2>Posts on Web Development</h2>
2cc1469 Site updated at 2012-01-23 12:45:44 UTC
Divya Manian authored
157 <ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
158 </aside>
159 <footer role="contentinfo"><p>
3c9d77b Site updated at 2012-01-01 19:06:29 UTC
Divya Manian authored
160 Copy to your heart’s content 2012 - Divya Manian -
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
161 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
162 </p>
163
164
165 </footer>
166
167
168 <script type="text/javascript">
169 var disqus_shortname = 'nimbublog';
170 var disqus_developer = 1;
171
172
173 var disqus_url = 'http://nimbupani.com/accessible-css-barcharts.html';
174 var disqus_identifier = 'http://nimbupani.com/accessible-css-barcharts.html';
175
176
177
178
179 (function () {
180 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
181 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
182 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
183 }());
184 </script>
185
186
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
187 <script src="/javascripts/octopress.js"></script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
188
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
189 <script>
190 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
191 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
192 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
193 s.parentNode.insertBefore(g,s)}(document,'script'));
194 </script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
195
196
197
198
199 </body>
200 </html>
Something went wrong with that request. Please try again.