Tabellen sind zum Symbol für die bösen, alten Zeiten geworden, als Killerwebsites State of the Art waren. Um Accessibility hat sich kaum einer gekümmert. Komplizierte Tabellentricks, Blind-Gifs und JavaScript waren die Lösung für alle Probleme und der Weg zur coolen Website. Der Weg war falsch, obwohl es kaum Alternativen gab. Das Mittel zum Zweck - Tabellen - werden heute dämonisiert. Zu Unrecht.

"Wie, ich dachte wir coden modern und vollkommen tabellenlos!" Das entgegnete mir neulich ein Freund, Journalist und Programmierer aufgebracht, als ich ihm von barrierefreien Tabellen erzählte. "Ja, wir layouten tabellenlos und setzen Tabellen nicht zu Design-Zwecken ein", erwiderte ich, "aber zur Informationsvermittlung können Tabellen das beste Instrument sein."

Tabellen sind in Verruf geraten. Einst waren sie die Wunderhelfer. Mehrere verschachtelte Tabellen hielten für den Besucher unsichtbar und kunstvoll Websites zusammen, trennten Spalten und stellten Header und Footer bereit. Sie durften ihre eigentliche Funktion, nämlich Daten vergleichbar darzustellen, nicht mehr ausüben. Sie wurden zweckentfremdet. Die neue Aufgabe war schmutzig und kompliziert. Weil jeder die entarteten Monstertabellen häßlich fand, wurden sie versteckt und unsichtbar gemacht.

Heute, im 21. Jahrhundert, haben Tabellen einen schlechten Ruf. Designer, die nach den neuesten Webstandards coden, halten sie für unbrauchbar, da es mit CSS bessere und elegante Möglichkeiten gibt, Strukturen zu schaffen. Mit Undank werden sie verabschiedet und als das Böse gebrandmarkt.

Tabellen können Läuterung erfahren

Die Tabelle hat eine zweite Chance verdient. Auch heute können Tabellen nützliche Helfer sein - wenn man sie nicht als Layoutinstrument missbraucht. Tabellen im Jahr 2004 zu Design-Zwecken einzusetzen ist falsch, nicht nur aus ideologischen Gründen, sondern aus Gründen der Effizienz und der Usability.

Tabellen laden lang.
Die Inhalte werden erst dann angezeigt, wenn die letzte Tabellenzelle berechnet und geladen ist. Bei Tabellenverschachtelungen nimmt dieser Effekt drastisch zu.
Tabellen sind unflexibel.
Der Quellcode verkompliziert sich immens. Layoutänderungen werden aufgrund von komplexen und interdependenten Tabellengerüsten zu anstrengenden und anspruchsvollen Aufgaben.
Tabellen blockieren den Weitertransport.
Die Portabilität einer tabellengestützten Website ist so gut wie nicht gegeben. Teure Exporte sind notwendig, damit die Website auf anderen internetfähige Endgeräten (Wap-Handy, Palm, Blackberry etc.) läuft.
Tabellen sperren die Inhalte ein.
Der Zugang für blinde Menschen wird erheblich erschwert oder gar unmöglich. Screenreader verlieren sich leicht in Tabellenkonstrukten und das Verständnis bleibt aus, da voneinander abhängige Inhalte über mehrere Zellen verteilt sind und nur visuell miteinander in Beziehung stehen. Ein Screenreader liest eine Tabelle immer linear vor, d.h. zeilenweise von links nach rechts.
Tabellen beschränken das Design.
Mit CSS lassen sich Websites mittlerweile viel anspruchsvoller gestalten als mit jedem Tabellen-Zauber. Viele Webdesigner halten dennoch an Übergangslösungen fest: Verschachtelte Tabellengerüste werden mit CSS kombiniert - was den Code und die Struktur der Seite noch komplizierter und fragiler macht. (Webdesigner, die mit veralteten Content Management Systemen arbeiten, haben oft keine andere Wahl.)

Nicht alle Tabellen sind böse

Tabellen zur Informationsvermittlung einzusetzen, ist richtiger denn je. Denn eine Tabelle kann Daten strukturell und informativ aufbereiten.

Eine tabellarische Aufbereitung ist sinnvoll bei:

Die Tabelle ist das beste Werkzeug, um Daten vergleichbar zu machen. Eine tabellarische Aufbereitung mit Hilfe einer div-Konstruktion zu realisieren, mag zwar anspruchsvoll sein, ist aber wenig effektiv. Denn ein solches Konstrukt ist schwer zugänglich, lädt länger und bläht unnötig den Quellcode auf. Vor allem aber ist ein solcher Code nicht semantisch. Die einzelnen Div-Container stehen nicht in Beziehung zueinander. Genau um diese Probleme zu vermeiden, verwendet man XHTML und CSS zum Strukturieren und Designen. Tabellen können Informationen vergleichbar aufbereiten, da der Tabellenkopf, die Zeilen und die Spalten in klaren Beziehungen zueinander stehen. Wenn man die Tabellen richtig einsetzt und beschriftet, bietet dies aus Accessibility-Sicht einen immensen Mehrwert.

Problem: Auch Tabellen, die rein der Informationsaufbereitung dienen, sind nicht automatisch barrierefrei. Screenreader für Blinde müssen mitgeteilt bekommen, wie die Tabelle zu lesen ist und wie die Daten miteinander in Beziehung stehen.

Lösung: Die klassische Tabelle (table, tr, td) wird mit zusätzlichen (X)HTML-Tags besser strukturiert und leichter verständlich.

Extra-Nutzen: Ein barrierefreies Vorgehen ermöglicht auch visuellen Browsern eine bessere Darstellung der Inhalte auf der Basis von semantischem Code.

Tabelle Modell Classic: table, tr, td

Üblicherweise besteht eine Tabelle aus den HTML-Tags: <table><tr><td></td></tr></table>. Um verschieden Zellen oder Spalten unterschiedlich zu gestalten oder eine Überschrift drüberzusetzen können man jetzt mit <b>s oder Klassen oder <div>s und <span>s arbeiten. Barrierefrei, semantisch und effizient wäre dies nicht.

Mit barrierefreien Tabellen ist es viel einfacher schöne und übersichtliche Tabellen zu designen, da es zahlreiche strukturelle HTML-Tags gibt, die man zum Stylen benutzen kann. Doch bevor man sich ums Design kümmert, sollte man die folgenden Grundfragen beantworten.

Wieso, weshalb, warum - Tabellen mit Mehrwert

Die Grundfragen einer barrierefreien Tabelle:

Welche Inhalte und Zusammenhänge werden dargestellt?
Der Zweck der Tabelle kann über <table summary="Bundesliga-Tabelle mit dem Spielstand nach 17 Spieltagen"><tr><td> ... angegeben werden. Das summary-Attribut ist eine längere Beschreibung, die Blinden den Tabelleninhalt näher erklärt. Exklusiv für Screenreader
Wie heißt die Tabelle oder welches Thema behandelt sie?
Ein Überschrift kann über das caption-Tag (<caption>) als Teil der Tabelle eingefügt werden. Das spart zum einen Code - etwa Basteleien mit dem colspan-Attribut. Zum anderen ist eine inhaltliche Zuordnung gesichert. Caption steht in struktureller und inhaltlicher Beziehung zur Tabelle. Eine Tabellenzeile hingegegen ist einfach nur eine table row, wie viele andere auch. <table><caption="Tabelle des 23. Spieltags"><tr><td> Durch caption erhält die Tabelle eine eigene, unverwechselbare, echte Überschrift. Wie in vielen wissenschaftlichen Texten erforderlich, kann ein Caption auch unterhalb der Tabelle stehen <caption="Hier steht die Überschrift" align="bottom"> Für grafische Browser, Screenreader und Textbrowser
Nach welchen Kriterien oder Kategorien wird sortiert?
Die Zellen der oberste Zeile können als Tabelleköpfe ausgewiesen werden. <table><tr><th>Kategorie 1</th></tr><tr><td>... Indem man zwischen Zellen, die der Kategoriebeschreibung dienen (th), und Zellen, die Informationen passend zu einer Kategorie beinhalten (td), unterscheidet, gibt man der Tabelle eine semantische Struktur. Der Kopf wird so zu einem klar deklarierter Abschnitt, der auch ohne CSS defaultmäßig vom Browser anders dargestellt wird, als die nachfolgenden Zellen. Standardmäßig werden <th>s gefettet. Dem <th> kann über das Stylesheet eine eigene Formatierung zugewiesen werden. Für grafische Browser, Screenreader und Textbrowser
Bei komplexen Tabellen kann man zusätzlich zwischen Kopf (<thead></thead>), Body (<tbody><tbody>) und Fußteil (<tfoot></tfoot>) einer Tabelle unterscheiden, um die tabellarisch aufbereiteten Daten besser lesen zu machen. Die einzelnen Zeilen werden so zu semantisch klar unterscheidbaren Bereichen. Für visuelle Browser, Textbrowser und Screenreader
Bei Screenreadern, die Tabellen immer von links nach rechts vorlesen, gibt es bei großen Tabellen oft das Problem, dass man nicht weiß, zu welcher Spalte der vorgelesene Inhalt gehört. Besonders schwierig wird es bei ähnlichen Datensätzen (z.B. Zahlen oder Prozentwerten). Mit der Vergabe von IDs in den <th>s (<th id="ergebnis">) und der Verwendung des headers-Attributs (<td headers="ergebnis">) in den zugehörigen <td>s kann erreicht werden, dass der Screenreader vor dem Inhalt der Zelle die zugehörige Kategorie (Spaltenüberschrift) mit vorliest. Das Prinzip ist einfach: Eine ID gibt dem Tabellen-Header einen eindeutigen Namen. Zellen, die z.B. zum Header mit der ID "unentschieden" gehören, tragen den Namen headers="unentschieden". <th id="siege">Siege</th><th id="unentschieden">Unentschieden</th><th id="niederlagen">Niederlagen</th> ... <td headers="siege">1</td><td headers="unentschieden">1</td><td headers="niederlagen">2</td> Für Screenreader

Geglückte Re-Sozialisierung: Schlaue Tabellen

Durch einen Namen (caption), einer Charakterbeschreibung (summary) und durch das Lernen von Verhaltensregeln (th, id, headers, tbody) sind Tabellen zu praktischen, leistungsstarken und liebenswerten Geschöpfen geworden und können überdies sogar ohne Extra-Design-Tags schön aussehen.

Fazit

Ein Herz für Tabellen gemäß Webstandards barrierefrei aufzubauen, lohnt sich gleich mehrfach:

  1. Sie kommunizieren mehr Inhalt mit weniger Code.
  2. Sie sind besser verständlich bei geringerer Ladezeit.

Tabellen sind liebenswerte Geschöpfe und zwar nicht aus nostalgischen Gründen, sondern aus Gründen der Leistungsfähigkeit. Ja zu Tabellen zur Informationsaufbereitung! Nein zu Tabellen als Layoutinstrument!

Bibliografie

Cederholm, Dan. 2004. Web Standards Solutions. (Kapitel 3: "Tables are Evil?")
Tiefer in den Code eintauchen mit Dan Cederholm. Im Buch finden sich gut strukturierte und praxisnahe Tabellen-Beispielen.
Clark, Joe. 2003. Building Accessible Websites. (Kapital 10: "Tables and Frames")
Nachdrücklich, undogmatisch und zum Teil zynisch erläutert Clark alle Hintergründe und Möglichkeiten zu barrierefreien Tabellen.
Meyer, Eric. 2004. More Eric Meyer on CSS. (Kapitel 3: "Styling a Financial Report")
Eric Meyer zeigt, wie man eine Jahresbilanz mit CSS layouten kann. Das Ergebnis ist schöner als jede Excel-Tabelle.
Miller, David F. 2004. Zebra Tables. http://www.alistapart.com/articles/zebratables/
Gestreifte Tabellen mit minimalem CSS
Pilgrim, Marc. 2002. Dive into Accessibility. "Using real table headers".
Marc Pilgrim zeigt anschaulich wie man gut strukturierte Tabellen codet und wer davon profitiert.
WebAIM. Creating Accessible Tables. http://www.webaim.org/techniques/tables/
Web Accessibility in Mind erklärt welches Basis-Konzept man bei der Verwendung von Tabellen im Kopf haben sollte.

Bei Vorsprung durch Webstandards weiterlesen

Creative Commons-LizenzvertragDieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert. (Feel free to steal, but think and quote.)