SAC Simple Accessible Charts

Inspired by http://www.thinkvitamin.com/features/design/the-standards-way-to-do-dynamic-data I try to figure out a easy, fast, accessible way to display simple Data and beautify them with CSS. It needed some time and a little bit wired thinking, but It works. Works fine in FF, IE 7/6, Opera 9 tested on WIN XP.

Advantages

• accessible
• fast
• No javascript Mum, in this basic version
• Makes search engines happy
• resizeable
• easy extendable, just add a new list entry

Nice to have

• Javascript parses the percentage and directly add the "background-position: value"
• horizontal charts (should be less tricky then the others)

Example Chart

Check out the source :-)

• Ants: 35%
• Bisons: 40%
• Crocodile: 87%
• Dingo: 45%
• Emu: 23%

HTML CODE

<ul class="chart">
<li>Ants<span style="background-position: center -35">: </span><strong>35%</strong></li>
<li>Bisons<span style="background-position: center -40">: </span><strong>40%</strong></li>
<li>Crocodile<span style="background-position: center -87">: </span><strong>87%</strong></li>
<li>Dingo<span style="background-position: center -45">: </span><strong>45%</strong></li>
<li>Emu<span style="background-position: center -23">: </span><strong>23%</strong></li>
</ul>

• Ants: 35%
• Bisons: 40%
• Crocodile: 87%
• Dingo: 45%
• Emu: 23%

HTML CODE

If you want to style the label seperatly

<ul class="chart">
<li><em>Ants</em><span style="background-position: center -35">: </span><strong>35%</strong></li>
<li><em>Bisons</em><span style="background-position: center -40">: </span><strong>40%</strong></li>
<li><em>Crocodile</em><span style="background-position: center -87">: </span><strong>87%</strong></li>
<li><em>Dingo</em><span style="background-position: center -45">: </span><strong>45%</strong></li>
<li><em>Emu</em><span style="background-position: center -23">: </span><strong>23%</strong></li>
</ul>

CSS Code

.chart {
	font-family: Tahoma;
	font-size: .7em;
	border: 1px solid #ccc;
	float: left;
	margin: 0;
	padding: .4em .1em;
}

.chart li {
	list-style: none;
	float: left;
	width: 5em;
	text-align: center;
	background: url(chart_bg.gif) center 1.6em no-repeat;
}

.chart li span {
	display: block;
	text-indent: -999em;
	padding-bottom: 90px;
	background: url(chart_bg_ol.gif) center -1px no-repeat;
	border-top: 5px solid #fff;
}

.chart strong {
	display: block;
	text-align: center;
	font-weight: normal;
}

Back to the article