Tabellen

Tabellen dienen der Kennzeichnung tabellarischer Daten. Es stehen Elemente und Attribute für Überschriften, Zusammenfassungen, Beschreibungen und Beziehungszuordnungen zur Verfügung. Eine Verwendung von Tabellen für Layoutzwecke gilt es zu vermeiden.
Stand 13.03.2013

Inhaltsübersicht:

1. Datentabellen
2. Layouttabellen

Datentabellen

Für das Umsetzen barrierefreier Tabellen stehen Elemente und Attribute für Überschriften, Zusammenfassungen, Beschreibungen und Beziehungszuordnungen zur Verfügung.

Das summary-Attribut, welches direkt im einleitenden <table>-Element zu notieren ist, dient der Angabe einer Zusammenfassung. Diese ist besonders für blinde Nutzer hilfreich, die so einen Überblick des Tabelleninhaltes erhalten. Sinnvoll sind Angaben zur Anzahl der Zeilen und Spalten und zum grundlegenden Aufbau, also Informationen die bei einer optischer Präsentation offensichtlich sind. Über das <caption>-Element wird der Tabelle eine Überschrift zugewiesen, die standardmäßig zentriert oberhalb der Tabelle angezeigt wird.

In HTML5 entfällt das summary-Attribut. Es wird empfohlen, Tabellen so zu gestalten, dass keine zusätzlichen Erläuterungen notwendig sind.

Einzelne Tabellenzellen sind in Daten- und Kopfzellen zu unterscheiden. Datenzellen werden durch das Element <td> (engl. table data) gekennzeichnet, Kopfzellen durch das Element <th> (engl. table head). Jede Datentabelle ist mit Zeilen- oder Spaltenüberschriften zu versehen. Für lange Überschriften innerhalb einer Kopfzelle wird empfohlen, das abbr-Attribut zu verwenden. Im Gegensatz zum <abbr>-Element, welches Abkürzungen kennzeichnet, dient hier abbr als Attribut und beinhaltet eine Kurzbezeichnung. Dies ist besonders bei mehrstufigen Tabellen für Nutzer eines Screenreader von Vorteil, der in diesem Fall nur beim ersten Lesen der Kopfzelle den langen Text vorliest und bei späteren Verknüpfungen dann nur den Kurztext ausgibt.

In HTML5 entfällt das abbr-Attribut. Alternativ kann das universelle title-Attribut verwendet werden.

Einfache Datentabellen haben nur jeweils eine Zeile oder Spalte für Überschriften. Wenn Tabellen jedoch zwei oder mehr logische Ebenen von Zeilen- oder Spaltenüberschriften haben, sollen die Datenzellen über Attribut-Auszeichnungen den Überschriften zugeordnet werden. Aktuell (Stand: Anfang 2007) ist für den Einsatz im Screenreader nur auf die Attribute id und headers Verlass. Werden diese Attribute entsprechend notiert, ist es dem Screenreader möglich, Datenzellen mit Kopfzellen in Verbindung zu setzen. Ein Screenreader liest z.B. automatisch die neue Zeilen- oder Spaltenüberschrift vor, wenn der Benutzer die Tabellenzeile oder -spalte wechselt. In diesem Zusammenhang ebenfalls von Interesse ist die Angabe des scope-Attributes. Über die Attributwerte col (engl. column, dt. Spalte) und row (dt. Zeile) wird ergänzend festgelegt, ob eine Kopfzelle für Spalten oder Zeilen gültig ist.

Zusätzlich können in Tabellen Elemente angegeben werden, die Kopf- (<thead>-Element), Daten- (<tbody>-Element) und Fußzeilen (<tfoot>-Element) in entsprechende Teilbereiche gliedern. Zu beachten ist die Notationsreihenfolge: Erst der Tabellenkopf, dann der Tabellenfuß und abschließend der Tabellenkörper. Natürlich wird trotz dieser vorgeschriebenen Reihenfolge der Tabellenfuß unterhalb des Tabellenkörpers angezeigt.

Beispiel XHTML-Datei - Tabellen (Ausschnitt):

Die Daten sind den "Lebenslagen der behinderten Menschen, Ergebnis des Mikrozensus 2003" entnommen.
<!-- Beginn Tabelle, Angabe einer Zusammenfassung --> <table summary="Vier Spalten und [...] Zeilen. Zeile 1 enthält Überschriftenzellen (Behinderte Menschen unterteilt in weiblich, männlich und gesamt). Spalte 1 ergänzt in jeder Zeile eine weitere Überschriften-Ebene (verschiedene Altersstufen), so dass eine Kreuztabelle entsteht.">
<!-- Tabellen-Überschrift --> <caption>Behinderte Menschen nach dem Ergebnis des Mikrozensus Mai 2003</caption>
<!-- Beginn Tabellenkopf --> <thead>
<!-- Beginn Zeile 1 --> <tr>
<!-- Leere Zelle: Zeile 1, Spalte 1 --> <th></th>
<!-- Kopfzelle: Zeile 1, Spalte 2 --> <th abbr="insgesamt" id="gesamt" scope="col">Behinderte insgesamt</th>
<!-- Kopfzelle: Zeile 1, Spalte 3 --> <th abbr="männlich" id="mann" scope="col">Behinderte männlichen Geschlechts</th>
<!-- Kopfzelle: Zeile 1, Spalte 4 --> <th abbr="weiblich" id="frau" scope="col">Behinderte weiblichen Geschlechts</th>
<!-- Ende Zeile 1 --> </tr>
<!-- Ende Tabellenkopf --> </thead>
<!-- Beginn Tabellenkörper --> <tbody>
<!-- Beginn Zeile 2 --> <tr>
<!-- Kopfzelle: Zeile 2, Spalte 1 --> <th id="arbeiter" scope="row">25 bis 45 Jahre</th>
<!-- Datenzelle: Zeile 2, Spalte 2 --> <td headers="arbeiter gesamt">941.000</td>
<!-- Datenzelle: Zeile 2, Spalte 3 --> <td headers="arbeiter mann">538.000</td>
<!-- Datenzelle: Zeile 2, Spalte 4 --> <td headers="arbeiter frau">403.000</td>
<!-- Ende Zeile 2 --> </tr>
<!-- Ende Tabellenkörper --> </tbody>
<!-- Ende Tabelle --> </table>

Bildbeschreibung "Datentabelle": Bildschirmfoto der optischen Browser-Ansicht des vorangegangenen Quelltext-Beispiels zur Kennzeichnung von Datentabellen.

Über Strg + Alt + Pfeiltasten (links, rechts, hoch, runter) kann im Screenreader JAWS (externer Verweis: http://www.freedomsci.de/serv01.htm) zwischen Tabellenzellen navigiert werden. Durch die Angabe der Kurzbezeichnung abbr="weiblich" in der Kopfzelle der 4. Spalte gibt JAWS beim Wechsel von Spalte 3 auf Spalte 4 in Zeile 2 bspw. aus: "weiblich, vierhundertdreitausend, Spalte vier".

Seitenanfang

Layouttabellen

Screenreader verarbeiten Tabellen zeilenweise und geben die Tabellenzellen von links nach rechts als einzelne Informationsblöcke aus. Dieses Vorgehen beschreibt die sog. Linearisierung. Eine Tabelle ist linearisierbar, wenn der vom Screenreader vorgelesene Inhalt in einer sinnvollen Reihenfolge wiedergegeben wird.

Barrieren entstehen bei durch Layouttabellen erzeugtem mehrspaltigen Text, wenn die von Print-Medien übernommene Darstellung des Mehrspalten-Layouts in der Linearisierung zu unverständlichen Inhalten führt.

Bildbeschreibung "Layouttabelle": Bildschirmfoto der optischen Browser-Ansicht des nachfolgenden Quelltext-Beispiels. Layouttabellen enthalten keine tabellarischen Daten sondern dienen nur der Positionierung verschiedener Elemente auf einer Webseite.

Beispiel HTML-Datei - Layouttabellen (Ausschnitt):

<table>
<tr>
  <td>Text1 [...]</td>
  <td>Text3 [...]</td>
  <td>Text5 [...]</td>
</tr>
<tr>
  <td>Text2 [...]</td>
  <td>Text4 [...]</td>
  <td>Text6 [...]</td>
</tr>
</table>

In der "traditionellen" Seitengestaltung werden Layouttabellen des Weiteren für die Gestaltung von Formularen eingesetzt, um Beschriftungen links von Formularfeldern zu positionieren. Damit werden Tabellen jedoch zweckentfremdet. Der barrierefreie Einsatz von Formularen wird im Artikel Formulare näher betrachtet.

Seitenanfang