HTML/CSS-Balkendiagramm – barrierefrei

Balkendiagramm mit TabelleNach meinem gestrigen Artikel Balkendiagramme mit CSS machte mich Thomas darauf aufmerksam, dass die DIV-Sammlung, die hinter dem Diagramm steckt, z.B. für Suchmaschinen oder auch für Screenreader, nicht lesbar sei. Zunächst erwiderte ich, dass dies auch auf Flash- oder JavaScript-Diagramme zutreffen würde, jedoch ergänzte Thomas vollkommen richtig, dass diese aber keinen Kauderwelsch im HTML erzeugen. Also habe ich mich nochmal in Ruhe mit der Sache beschäftigt, um den gestern vorgestellten Code dementsprechend zu optimieren.

Das Problem

Mein Fehler lag darin, dass ich vor lauter Wald die Bäume nicht mehr gesehen habe. Voller Begeisterung für die Positionierungsmöglichkeiten von CSS habe ich das Diagramm aus augenscheinlich zusammenhangslosen DIVs gebaut. Dabei bietet HTML doch durchaus sinnvolle Möglichkeiten zur sinnvollen Erfassung solcher Daten, die dann wiederum mit CSS auf den entsprechende Format gebracht werden können. Beispielsweise lassen sich die Daten in einer Tabelle erfassen, die für lesende Software nachvollziehbar sind, und die dann dank CSS optisch aufbereitet werden.

Ein Beispiel

Thomas verwies auf einen von ihm gebauten CSS-Graphen, der sehr eindrucksvoll die Möglichkeiten zur Formatierung einer korrekten Tabelle mit CSS präsentiert. Die Werte werden bei eingeschaltetem CSS in einem mehrdimensionalen Balkendiagramm dargestellt, wobei die Balken aus entsprechend verschobenen Grafiken bestehen. Solltet ihr an einer solchen komplexen Lösung interessiert sein, schaut mal in den kommentierten Quelltext. Schaltet man CSS aus, so bekommt man eine ganz normale Tabelle der gezeigten Werte zu Gesicht.

Das gestrige Beispiel mit TABLE

Die Verwendung einer TABLE hat nicht nur den Vorteil, dass die Daten auch ohne CSS interpretierbar sind, sondern auch, dass wir auf die ganzen Positionierungen verzichten können. Somit ist diese Variante nicht nur barrierefrei, sondern zudem auch deutlich einfacher. Zunächst zeige ich den allgemeinen CSS-Teil der Umsetzung:

[cc lang=”css”]
#bardemo {
border:1px solid black;
border-collapse:collapse;
}
#bardemo thead {
font-family:Verdana;
font-size:1.2em;
height:3em;
}
#bardemo tfoot {
font-style:italic;
font-size:0.9em;
text-align:center;
height:3em;
}
#bardemo tbody {
font-family:Verdana;
font-size:1em;
}
#bardemo tbody tr {
height:3em;
line-height:2em;
}
#bardemo tbody th {
text-align:left;
border-right:1px solid black;
padding:0 10px;
font-weight:normal;
}
#bardemo tbody td {
padding:0 10px 0 0;
margin:0;
}
#bardemo tbody div {
text-align:right;
height:30px;
float:left;
margin-right:10px;
}
[/cc]

Sieht schon deutlich einfacher aus, oder? Mit dem obigen Code ist schon alles vorbereitet. Nun müssen wir nur noch die Balken mit Farben (bzw. Hintergrundgrafik) und Länge definieren, wobei hier auch wieder 1 Pixel für 0,25 Prozent genommen wurde:

[cc lang=”css”]
#bardemo .barA div {
background: #c00 url(bar_sprite.png);
width:150px;
}

#bardemo .barB div {
background: #0c0 url(bar_sprite.png);
width:270px;
background-position:0 -30px;
}

#bardemo .barC div {
background: #00c url(bar_sprite.png);
width:400px;
background-position:0 -60px;
}
[/cc]

Bleibt jetzt noch die zugehörige Tabelle:

[cc lang=”html”]

Unser Balkendiagramm
%
Wert A:
 

37,5

Wert B:
 

67,5

Wert C:
 

100

[/cc]

Zur Darstellung der Balken verwende ich einfach leere DIVs (ein Leerzeichen   ist darin, um Warnungen des Validators zu umgehen), die dank CSS optisch gestaltet werden. Folgender Screenshot zeigt das Ergebnis:

Balkendiagramm aus Tabelle - Beispiel

Das Schöne ist, dass die ganze Sache auch deutlich kompakter wird. Inkl. Spritegrafik bringt diese Lösung (ohne Minimierung des Codes) weniger als 2 Kilobyte auf die Waage. Mit deaktiviertem CSS sieht es dann wie auf diesem Screenshot aus:

Darstellung der Tabelle ohne CSS

Daher nochmal vielen Dank an Thomas für den sinnvollen Hinweis in die richtige Richtung!

3 thoughts on “HTML/CSS-Balkendiagramm – barrierefrei

  1. Feine Sache, vielen Dank.

    Wenn man Platz sparen muss, möchte man vielleicht die Zahlen INNERHALB der BALKEN positionieren, entweder links- oder rechtsbündig. Geht das auch?

  2. Klar. Die einfachste Lösung ist es dabei, die Zahlen direkt in das DIV zu schreiben. Ausrichtung, Farbe etc. können dann wiederum via CSS festgelegt werden. Aber vorsicht: Bei sehr kurzen Balken kann das natürlich ziemlich eng werden 😉

Comments are closed.