Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Benimmregeln für Datentabellen geschrieben von Tomas Caspers (2008)

Die Inhalte dieser Seite sind ursprünglich in einer vierteiligen Serie von der Extern: Aktion Mensch veröffentlicht worden. Auf www.barrierefreies-webdesign.de werden die ersten drei Teile auf mehreren Seiten verteilt präsentiert.

Für Webentwickler bedeutete die Umstellung von Tabellen auf CSS, dass sie alte Gewohnheiten vergessen mussten. Sämtliche Techniken und Kniffe aus den Zeiten von Layout-Tabellen sind scheinbar "verlernt". Das richtige Umsetzen echter Datentabellen erfordert jedoch eine Rückbesinnung: man muss sich wieder mühsam in die Spezifikationen einlesen und in das Tabellenmodell von HTML hineindenken.

Wir erklären, wie man tabellarische Daten so aufbereitet, dass sie nicht nur hübsch aussehen, sondern auch mit den assistiven Programmen von Menschen mit Behinderung optimal nutzbar sind.

Einführung

HTML-Tabellen wurden erstmalig Mitte der neunziger Jahre gebräuchlich – damals noch mit dem klaren Ziel, tabellarische Daten darzustellen. Sehr schnell erkannten findige Webdesigner, dass man mit Tabellen weitaus mehr machen kann als nur Börsenkurse oder Wetterberichte zu formatieren und sie benutzten Tabellen zur freien Positionierung von Seiteninhalten auf den damals in der Regel einspaltigen Webseiten.

Weil sich auch schon damals nicht alle Browser gleich verhielten, kam es schnell zu den ersten Hacks mit verschachtelten Tabellen und Spacer-GIFs und ein neues Problem war geboren – die unzugängliche Layout-Tabelle. Deren Hauptproblem, neben dem aufgedunsenen Code: die mangelnde Linearisierbarkeit und der damit verbundene unlogische Aufbau einer Seite, bei der die optische Darstellung nicht mehr unbedingt der Reihenfolge im Quelltext entspricht.

Auch wenn kein zwingender Zusammenhang besteht, die praktische Erfahrung hat gezeigt, dass Layout-Tabellen in der Regel zusammen mit unflexiblen Bemaßungen, tiefen Verschachtelungen und invalidem Code benutzt werden – Techniken, die weitere negative Folgen für die Zugänglichkeit eines Angebots nach sich ziehen. Das größte Problem bei Tabellen ist demnach nicht ihre Verwendung per se, sondern die Art und Weise wie sie eingesetzt werden.

Besonders problematisch war und ist dies für die sogenannten Screenreader – dies sind Programme, mit denen blinde oder stark sehbehinderte Nutzer eine aufbereitete akustische Ausgabe der Webinhalte erhalten. Anders als der Name vermuten lässt, lesen moderne Screenreader nicht einfach den Bildschirminhalt vor (z.B. von links oben nach rechts unten), sondern die Programme interpretieren (vereinfacht gesagt) eine eigene Version des Quelltextes einer Seite. Problematisch wird dieser Quelltext dann, wenn sich die Auszeichnung der Inhalte (das sog. Markup) nicht an Konventionen hält oder Sprachelemente von HTML zu Zwecken eingesetzt werden, für die sie nie gedacht waren.

Intern: Weiter zur Einführung …

Teil 1: Einfache Datentabellen

Nicht-visuelle Zugangsformen benötigen ganz spezielle Elemente und Attribute in Datentabellen, um die logischen Verknüpfungen zwischen Datenzellen und den dazugehörigen Überschriftenzellen herstellen zu können.

Dies beginnt bereits mit einfachen Datentabellen, also Tabellen, die maximal über eine Zeile oder eine Spalte von Überschriftenzellen verfügen. In der Extern, englischsprachig: HTML 4.01-Empfehlung ist für diese Zellen das Element TH (=table header) vorgesehen, für die Datenzellen das Element TD (=table data). Das einfachste mögliche Beispiel für eine Datentabelle finden Sie im folgenden Codelisting:

<table>
  <tr>
    <th> … </th>
    <th> … </th>
  </tr>
  <tr>
    <td> … </td>
    <td> … </td>
  </tr>
</table>

Allerdings fehlen hier sämtliche Attribute und weitere HTML-Elemente, die aus einer Tabelle erst eine echte Datentabelle machen. Bei sehr einfachen Tabellen kann man sich die Mühe einer weiteren Auszeichnung sparen, da die Zuordnung der Zellen zu ihren Überschriften (wie im vorstehenden Beispiel) implizit vorhanden ist.

Die HTML-Spezifikation sieht vor, dass User Agents (und das schließt natürlich Hilfsmittel wie Screenreader mit ein) sich in einem solchen Fall selbst auf die Suche nach zugehörigen Zellen machen sollen (in der Regel also nach rechts bzw. nach unten). Es gehört nicht viel Phantasie dazu sich vorzustellen, dass dieser Versuch in der Praxis oftmals auf ein Ratespiel mit nicht immer korrekten Ergebnissen hinausläuft.

Spätestens wenn Ihre Datentabelle also 3-4 oder mehr Zeilen oder Spalten besitzt, wird eine weitergehende programmatische Verknüpfung unabdingbar. Diese wollen wir hier kurz vorstellen; Intern: fangen wir zunächst mit der aufwändigsten Methode an.

Teil 2: Komplexe Datentabellen

Wenn Ihre Tabellen über mehr als eine Zeile oder Spalte von Überschriftenzellen verfügen, dann haben Sie damit bereits komplexe Datentabellen. Neben den in Teil 1 der Serie angesprochenen Elementen und Attributen sollten nun weitere Techniken zum Einsatz kommen, die eine barrierefreie Nutzung solcher Tabellen erst ermöglichen. Dabei geht es nicht um zusätzlichen Komfort für Menschen mit Behinderungen, sondern um den zwingenden Einsatz von Techniken, ohne die sich die Inhalte einer Tabelle in nicht-visuellen Medien nicht erschließen lassen.

Screenshot-Ausschnitt mit Hervorhebungen eines dreifach-verschachtelten Tabellenlayouts. Der Ausschnitt eines tabellenbasierten Layouts ist dem ehemaligen Webauftritt einer Bundesbehörde entnommen.

Ähnliches gilt natürlich auch für tabellenfreie Layouts: mit CSS kann man ebenso Seiten erstellen, die zwar hervorragend aussehen, die jedoch linearisiert (also ohne CSS) betrachtet keine sinnvolle Nutzung ermöglichen. Einen weiteren Sonderfall stellen Angebote dar, deren Inhalte bei genauerer Analyse eigentlich mit Tabellen aufgebaut sein müssten, bei denen die Entwickler jedoch versucht haben, die Optik mit CSS und verschachtelten DIV nachzubilden. Hier fehlen dann die notwendigen Strukturinformationen, die zu einer effektiven Nutzung der logischen Zusammenhänge bei den tabellarischen Daten benötigt werden, da diese nicht über DIV und SPAN erzeugt werden können.

Kein Element aus HTML ist "schlecht" oder "gut" im Sinne der Accessibility, sofern es so verwendet wird, wie es seinem vorgesehenen Zweck entspricht. Dazu gehört, dass Tabellen (anders als in der BITV vorgesehen) nicht "in der Regel nur zur Darstellung tabellarischer Daten zu verwenden" sind, sondern generell im Layout einer Seite nichts verloren haben. Die Diskussion, ob Layout-Tabellen nicht doch besser seien ist schon vor Jahren zu Gunsten von CSS entschieden worden. Anders lautende Behauptungen können nicht das Gegenteil beweisen, sondern lassen nur den Schluss zu, dass sich die Verfechter von Tabellenlayouts nicht mit modernen Handwerkstechniken der Webentwicklung beschäftigen wollen.

Intern: Weiter zu den komplexen Datentabellen …

Codelistings zur Serie "Benimmregeln für Datentabellen"

Wir bedanken uns bei Extern: Carsten Albrecht, Mitarbeiter im Projekt INCOBS und (BIK) für die tatkräftige Unterstützung beim Testen.