Navigation und Service

Einfach teilhaben (Link zur Startseite)


Datentabellen

Was sind Datentabellen?

Eine Datentabelle ist eine optische Anordnung von Daten in Spalten und Reihen, wodurch die Daten in den Spalten und in den Reihen in eine Beziehung gesetzt werden. Meist besteht dabei die erste Zeile - die sogenannte Kopfzeile - aus Spaltenüberschriften, die die Bedeutung der Datenzellen einer Spalte bezeichnen. Entsprechendes gilt auch für die erste Spalte - die sogenannte Vorspalte -, sie enthält häufig Zeilenüberschriften, die jeweils die Bedeutung einer Zeile bezeichnen. Bei komplexeren Tabellen wird häufig von diesem einfachen Prinzip abgewichen.

Das Konzept einer Datentabelle ist es also, eine Beziehung von Daten durch die optische Anordnung darzustellen.

Bei Tabellen auf Webseiten muss allerdings die Datentabelle von den sogenannten Layout-Tabellen unterschieden werden. Layout-Tabellen waren in der Vergangenheit ein beliebtes Konstrukt, um ein mehrspaltiges Layout einer gesamten Webseite oder von Bereichen einer Webseite zu erzwingen. Es werden dabei die HTML-Tabellen-Elemente genutzt — viele würden sagen missbraucht — obwohl keine echten Daten durch die Anordnung in Beziehung gesetzt werden. Die BITV verbietet solche Layout-Tabellen nicht explizit, jedoch wird durch deren Verwendung die Erfüllung einiger BITV-Punkte erschwert. Im modernen Webdesign gelten Layout-Tabellen als überholt und deren Verwendung wird häufig als veraltet angesehen.

Welche Probleme treten auf?

Da eine Datentabelle ein optisches Mittel ist, um Daten untereinander in Beziehung zu setzen, gehen diese Beziehungen bei der Übertragung in eine andere Darstellungsform oder in ein anderes Medium verloren. Würde eine Tabelle linear von links nach rechts und von oben nach unten vorgelesen werden, dann würden die Beziehungen zwischen Spalten und Zeilen nur noch mit einem kaum zu leistenden hohen kognitiven Aufwand nachvollziehbar sein.

Beispiel-Screenshot: Tabelle mit Vorspalte und Kopfzeile Beispiel-Screenshot: Tabelle mit Vorspalte und Kopfzeile

Würde ein Programm zum Vorlesen von Bildschirminhalten — ein sogenannter Screenreader — die obige Tabelle lediglich linear vorlesen, würde sich folgender nur äußerst schwer verständlicher Text ergeben:

"Gesamt, Bund, Länder, Anteil, CDU/CSU, 486, 237, 249, 39,2%, SPD, 331, 146, 185, 26,7%, Bündnis 90/Die Grünen, 147, 68, 79, 11,9 % ..."

Das obige Beispiel verdeutlicht, dass es bei steigender Komplexität der Tabelle stetig schwerer wird, die Inhalte der Tabellen zu verstehen. Screenreader-Hersteller haben Verfahren entwickelt, um Datentabellen trotzdem in eine verständliche Form zu linearisieren. Ist die obige Datentabelle korrekt mit HTML-Tags ausgezeichnet, kann der Screenreader Kopfzellen wiederholt vorlesen und so blinden Menschen die Orientierung erleichtern. Folgendes Beispiel zeigt eine mögliche Screenreader-Ausgabe, die die Beziehungen innerhalb der Tabelle auch beim Lesen beibehält:

"CDU/CSU, Gesamt, 486, Bund, 237, Länder, 249, Anteil, 39,2%, SPD, Gesamt, 331, Bund, 146, Länder, 185, Anteil, 26,7%, Bündnis 90/Die Grünen, Gesamt, 147, Bund, 68, Länder, 79, Anteil, 11,9 % ..."

Voraussetzung ist, dass die HTML-Elemente für Tabellen korrekt verwendet werden und der Screenreader so erkennen kann, welche Kopfzelle zu welcher Datenzelle gehört. Bei komplexen Tabellen sind auch andere Lesereihenfolgen beziehungsweise Darstellungsformate, bis hin zu einem Abfragesystem nach bestimmten Tabelleninhalten, denkbar. Bei einem solchen Abfragesystem könnte die Nutzerin oder der Nutzer Überschriftenzellen nach den gewünschten Inhalten auswählen und das Abfragesystem gibt die zugeordneten Datenzellen aus.

Tabellen in HTML

Grundlegendes Markup

Tabellen werden in HTML durch das <table>-Tag erzeugt. Innerhalb der Tabelle wird jede Tabellen-Zeile durch <tr> und </tr>-Tags (table row) umschlossen. In die Tabellenzeilen werden die einzelnen Tabellenzellen entweder durch <th>-Tags oder durch <td>-Tags eingefügt. Die td-Elemente stehen dabei für Datenzellen (table data) und die th-Elemente für Kopfzellen (table header).

Folgendes einfache Beispiel zeigt einen tabellarischen Vergleich von Äpfeln und Birnen:

Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Zellen in Vorspalte und Kopfzeile Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Zellen in Vorspalte und Kopfzeile

Im zugehörigen HTML-Code wurden die Zellen der ersten Zeile und der ersten Spalte durch th-Elemente als Kopfzellen gekennzeichnet.

<table>
  <tr>
     <td></td>
     <th>Apfel</th>
     <th>Birne</th>
  </tr>
  <tr>
     <th>Form</th>
     <td>Rundlich</td>
     <td>Birnenförmig</td>
  </tr>
  <tr>
     <th>Gattung</th>
     <td>Kernobstgewächse</td>
     <td>Kernobstgewächse</td>
  </tr>
  <tr>
     <th>Arten</th>
     <td>ca. 50</td>
     <td>ca. 5000</td>
  </tr>
</table>

Das W3C schlägt zur Auffindung von Kopfinformationen einen Standard-Algorithmus vor. Dieser würde im obigen Beispiel zunächst für jede Datenzelle die Tabelle nach links durchlaufen und die Zeilen-Kopfzellen finden, danach würde der Algorithmus die Zellen über der Datenzelle durchsuchen. Der Algorithmus würde also im Beispiel unten für die markierte Zelle mit dem Inhalt "Rundlich" die Kopfzellen "Form" und "Apfel" finden.

Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Zellen in Vorspalte und Kopfzeile, farbliche Markierungen zeigen die Zuordnungen Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Zellen in Vorspalte und Kopfzeile, farbliche Markierungen zeigen die Zuordnungen

In den Standardeinstellungen der Browser werden th-Elemente meist in Fett-Schrift dargestellt. Diese Eigenschaft darf nicht missbraucht werden um Tabellenzellen in irgendeiner Form hervorzuheben. th-Elemente haben eine semantische Bedeutung und sollten deshalb auch nur in diesem Sinne verwendet werden. Das letztliche Aussehen der Tabelle sollte ausschließlich in den zugehörigen Style-Sheet-Dateien bestimmt werden.

Laut HTML-Spezifikation soll für eine Zelle, die gleichzeitig als Daten- und Kopfzelle verwendet wird, das td-Element genutzt werden.

In der Regel liegt dieser Fall vor, wenn einer Kopfzelle selbst ebenfalls eine oder mehrere Kopfzellen zugeordnet wurden. Wenn dies der Fall ist, muss eine zusätzliche Methode angewandt werden, um Kopfzellen zu kennzeichnen. Lesen Sie zu dieser Methode den Abschnitt Beziehungen in einfachen Tabellen.

Zusätzlich können die Zeilen einer Tabelle in drei oder mehr horizontale Bereiche gegliedert werden. Mit dem thead-Element und dem tfoot-Element können eine Kopf- und eine Fußzeile bestimmt werden und mit einem oder mehreren tbody-Elementen kann der eigentliche Tabelleninhalt nochmals gruppiert werden. Durch das Definieren von Kopf- und Fußzeilen ist es zum Beispiel möglich beim Drucken einer Tabelle über mehrere Seiten diese Bereiche auf allen Seiten zu wiederholen. Damit ein Browser die dafür notwendigen Berechnungen in einem Tabellendurchlauf berechnen kann, wurde die Reihenfolge der Elemente in HTML so spezifiziert, dass das tfoot-Element vor dem tbody-Element angegeben werden muss! Die Reihenfolge weicht also von der intuitiv zu erwartenden Reihenfolge ab. Nützlich ist auch die Einteilung des Tabellenkörpers in mehrere tbody-Elemente. So ist es möglich verschiedene Bereiche der Seite mittels Cascading Style Sheets (CSS) unterschiedlich aussehen zu lassen. Zum Beispiel könnte eine Sporttabelle in die Bereiche für Meister, Aufsteiger und Absteiger unterteilt und diese durch verschiedene Hintergrundfarben kenntlich gemacht werden.

Beispiel-Screenshot: Tabelle mit 4 horizontalen Bereichen, einen thead-Bereich, einen tfoot-Bereich und zwei tbody-Bereichen Beispiel-Screenshot: Tabelle mit 4 horizontalen Bereichen, einen thead-Bereich, einen tfoot-Bereich und zwei tbody-Bereichen

Zusammenfassungen - summary-Attribut

Da es für Nutzerinnen und Nutzern von Screenreadern schwer ist Inhalte, Strukturen, Datenmuster und Tendenzen in Datentabellen zu erschließen, ist für eine Tabelle eine kurze Zusammenfassung anzubieten. In HTML ist dafür das summary-Attribut vorgesehen. Die Zusammenfassung sollte erklären, wie die Tabelle aufgebaut ist und wie sie benutzt werden sollte. Ziel der Beschreibung ist es, dass ein Mensch, der die optische Anordnung nicht wahrnehmen kann, eine visuelle Vorstellung von der Tabelle bekommt und dass diese Person eine Entscheidung treffen kann, ob die gesuchte Information wahrscheinlich in der Tabelle zu finden ist oder nicht. Der Inhalt des summary-Attributs selbst wird von Browsern nicht angezeigt, lediglich assistive Technologien wie zum Beispiel Screenreader geben diese Informationen an Ihre Nutzerinnen und Nutzer weiter. Ist der Inhalt der Zusammenfassung auch für sehende Menschen hilfreich, sollten Sie in Betracht ziehen, eine Zusammenfassung im eigentlichen Text der Webseite anzubieten. Der Inhalt des summary-Attributs kann dann kürzer ausfallen und zusätzlich auf die längere Beschreibung verweisen.

Wie detailliert eine Zusammenfassung sein muss oder was eine korrekte Zusammenfassung ausmacht, kann nicht pauschal angegeben werden. Die Sichtweisen einzelner blinder Menschen und auch die Absicht der Autorinnen und Autoren sind in dieser Frage von subjektiven Vorstellungen geprägt. Trotzdem kann mit Hilfe der im Folgenden vorgestellten Techniken eine BITV-konforme Zusammenfassung, die für möglichst viele Nutzerinnen und Nutzer geeignet ist, gefunden werden.

Wie könnte die Zusammenfassung der obigen Tabelle zur "Zusammensetzung der 15. Bundesversammlung am 18. März 2012" aussehen? Da es bei der Nutzung dieser Tabelle keine allgemeingültige Vorgehensweise gibt, wäre eine strukturelle Beschreibung der Tabelle sinnvoll:

<table summary="Jede Zeile steht für eine Partei, der Parteiname 
steht dabei in der ersten Spalte. In den weiteren Spalten finden Sie 
nacheinander die Gesamtanzahl der Delegierten einer Partei, den Anteil 
der Sitze die durch die Bundespartei besetzt werden, die Sitze die 
durch die Länder besetzt werden und in der letzten Spalte finden Sie 
den prozentualen Anteil der Sitze, die auf die Partei fallen. Die 
Parteien mit dem höchsten Stimmenanteil sind zuerst in der Tabelle 
genannt.">

Eine blinde Person weiß so, welche Informationen in der Tabelle gefunden werden können. Die Person weiß aber auch, welche Informationen hier nicht zu finden sind, zum Beispiel dass hier nicht die Namen der einzelnen Delegierten aufgelistet sind. Die blinde Person, die diese wahrscheinlich nicht vorhandenen Informationen sucht, könnte also diese Tabelle bedenkenlos überspringen.

Ist zur Nutzung einer Tabelle ein konkretes Vorgehen wichtig, sollte eine Beschreibung des Vorgehens in der Zusammenfassung zu finden sein. Bei einer Tabelle eines Busfahrplans sollte zum Beispiel erklärt werden, wie der Plan zu lesen ist:

Häufig sind aber auch nicht alle Daten einer Tabelle im Textzusammenhang interessant, sondern nur bestimmte Aspekte der Datentabelle. Dies ist häufig der Fall, wenn eine Tabelle verwendet wird, um Aussagen eines Textes der Webseite zu belegen. In diesem Fall sollten Sie in der Zusammenfassung auch die besonderen Aspekte der Tabelle hervorheben.

Beschriftung - caption-Element

Jede Datentabelle muss beschriftet werden. Für Tabellen existiert dazu in HTML das caption-Element. Der Inhalt des caption-Elements kann von einem Screenreader mit der Tabelle in Verbindung gesetzt werden. Damit haben Screenreader die Möglichkeit die Beschriftung beim Vorlesen einer Seitenübersicht oder als Navigationshilfe zu verwenden. Die Beschriftung soll der Tabelle einen Titel geben, mit dem es möglich ist, die Tabelle gegenüber weiteren Tabellen zu identifizieren. Wichtig ist, dass die Beschriftung nicht die Informationen aus der Zusammenfassung des summary-Attributs wiederholt.

Code-Beispiel für eine Tabellenbeschriftung:

<table summary="...">
   <caption>
      Bundespräsidenten der Bundesrepublik Deutschland
   </caption>
...
</table>

Neben der semantischen Verbindung zwischen Beschriftung und Tabelle existiert auch eine optische Verbindung. So wird die Beschriftung in der Regel mittig über die Tabelle platziert. Mittels der CSS-Eigenschaft caption-side:bottom kann die Beschriftung auch unterhalb der Tabelle angeordnet werden. Der optische Eindruck der Zusammengehörigkeit sollte in beiden Fällen vorhanden bleiben.

Beispiel-Screenshot: Tabellen mit Beschriftungen, links unter der Tabelle, rechts über der Tabelle Beispiel-Screenshot: Tabellen mit Beschriftungen, links unter der Tabelle, rechts über der Tabelle

Beziehungen in einfachen Tabellen

Wenn eine Datenzelle gleichzeitig auch als Kopfzelle fungiert, soll laut HTML-Spezifikation für diese Zelle das td-Element und nicht das th-Element verwendet werden. Hintergrund ist unter anderem, dass ein Screenreader diese Zelle zunächst wie eine Datenzelle behandeln muss. Für benachbarte Datenzellen kann es aber sein, dass die Datenzelle wie eine Kopfzelle wirken soll. Um dies möglich zu machen, kann der Datenzelle das scope-Attribut zugeordnet werden. Das scope-Attribut gibt dabei den Geltungsbereich der Kopfzelle an und kann folgende Werte haben:

  • scope="col": Die Zelle ist eine Kopfzelle und bezieht sich auf die Datenzellen in derselben Spalte.
  • scope="row": Die Zelle ist eine Kopfzelle und bezieht sich auf die Datenzellen in derselben Zeile.
  • Zusätzlich gibt es noch die beiden Werte colgroup und rowgroup. Diese sind für komplexere Tabellen hilfreich, bei denen Kopfzellen über mehrere Spalten oder Zeilen gespannt sind.

Das folgende Beispiel erzeugt eine Tabelle mit einer Aufzählung der Bundespräsidenten der Bundesrepublik Deutschland.

Beispiel-Screenshot: Tabelle mit Daten und Jahreszahlen. Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Datenzellen in der zweiten Spalte

Die erste Zeile besteht vollständig aus Kopfzellen deren Geltungsbereich die jeweilige Spalte ist. Die Datenzellen mit den Präsidentennamen fungieren hier gleichzeitig als Kopfzellen. Für einen blinden Menschen ist der Präsidentenname zu einer Datenzelle informativer als die Positionsnummer aus der ersten Spalte. Aus diesen Gründen wurden die td-Elemente der zweiten Spalte mit dem Attribut scope="row" erweitert. Die Datenzelle wird also beim Vorlesen wie eine Datenzelle gehandhabt und ist ihrerseits mit der Kopfzelle "Name" verbunden. Für alle Zellen derselbe Zeile agiert die Datenzelle aber selbst als Kopfzelle und der Präsidentenname wird zusammen mit den jeweiligen Daten vorgelesen.

<table summary="Die Tabelle listet die Bundespräsidenten der 
Bundesrepublik Deutschland mit ihren jeweiligen Amtszeiten auf. Den 
Namen finden Sie in der zweiten Spalte. In der jeweiligen Zeile folgen 
dann die Parteizugehörigkeit, das Datum des Beginns und des Endes der 
Amtszeit, die Anzahl der Tage im Amt und die jeweiligen Wahljahre">
  <caption>
     Bundespräsidenten der Bundesrepublik Deutschland
  </caption>
  <thead>
     <tr>
        <th scope="col">Nummer</th>
        <th scope="col">Name</th>
        <th scope="col">Partei</th>
        <th scope="col">Beginn der Amtszeit</th>
        <th scope="col">Ende der Amtszeit</th>
        <th scope="col">Tage im Amt</th>
        <th scope="col">Wahlen</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>1</td>	  
        <td scope="row">Theodor Heuss</td>	  
        <td>FDP</td>	  
        <td>12.09.1949</td>	  
        <td>12.09.1959</td>	  
        <td>3653</td>	  
        <td>1949/1954</td>	  
     </tr>
     <tr>
        <td>2</td>	  
        <td scope="row">Heinrich Lübke</td>	  
        <td>CDU</td>	  
        <td>13.09.1959</td>	  
        <td>30.06.1969</td>	  
        <td>3579</td>	  
        <td>1959/1964<td>	  
     </tr>
     <tr>
        <td>3</td>	  
        <td scope="row">Gustav Heinemann</td>	  
        <td>SPD</td>	  
        <td>01.07.1969</td>	  
        <td>30.06.1974</td>	  
        <td>1826</td>	  
        <td>1969</td>	  
     </tr>
     ...
  </tbody>
</table>

Die folgende Abbildung illustriert die Zuordnung der Kopfzellen für die Datenzelle mit der Zahl "3579".

Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Datenzellen in der zweiten Spalte, farbliche Markierungen zeigen die Zuordnungen Beispiel-Screenshot: Tabelle mit als Kopfzellen markierten Datenzellen in der zweiten Spalte, farbliche Markierungen zeigen die Zuordnungen

Von der Datenzelle "3579" aus nach links trifft der Algorithmus des Screenreaders auf die Zelle mit dem Attribut scope="row", also auf die Zeilen-Kopfzelle. Nach oben trifft der Algorithmus auf die mit einem th-Element gekennzeichnete Kopfzelle "Tage im Amt". Ein Screenreader dessen Cursor auf der Zelle mit der Zahl "3579" steht, kann also folgendes vorlesen:

"Heinrich Lübke, Tage im Amt, 3579"

Wenn Sie das scope-Attribut verwendet möchten, sollten Sie darauf achten, dass Sie es aus formalen Gründen für alle Kopfzellen einsetzen. Hintergrund ist, dass die WCAG-Technik zur Benutzung des scope-Attributes, um Überschriftenzellen und Datenzellen in Tabellen zu verbinden, dies für alle Kopfzellen fordert. Nur durch die einheitliche Verwendung von Techniken in Tabellen, ist sichergestellt, dass die Nutzerinnen und Nutzer auf die Tabellen korrekt und einheitlich und damit nachvollziehbar mit Hilfsmitteln zugreifen können.

Tabellen mit Zeilen- oder Spaltengruppen

Werden die Tabellen komplexer, reicht eine einfache waagerechte und senkrechte Verbindung von Kopf- und Datenzellen nicht mehr aus. In folgendem Beispiel überspannen die beiden Kopfzellen "Ostdeutschland" und "Westdeutschland" jeweils 2 Spalten. Sie haben also einen erweiterten Geltungsbereich gegenüber einer einfachen Kopfzelle. Mit dem Wert colgroup des scope-Attributs kann dies auch für Screenreader festgelegt werden.

Die Spaltengruppen des Gültigkeitsbereichs werden dabei am Beginn der Tabelle durch colgroup-Elemente festgelegt. Die colgroup-Elemente werden auch benutzt um einzelne Spaltenbereiche unterschiedlich mit Cascading Style Sheets (CSS) anzuzeigen. Dieses Verfahren ist nicht zu verwechseln mit dem Verbinden von Zellen mittels des colspan-Attributs. Das colspan-Attribut hat keinen Einfluss auf die Zuordnung von Kopfzellen!

In der folgenden Tabelle überspannen die Kopfzellen "Ostdeutschland" und "Westdeutschland" jeweils 2 Spalten.

Beispiel-Screenshot: Tabelle mit Spaltengruppen in der Kopfzeile Beispiel-Screenshot: Tabelle mit Spaltengruppen in der Kopfzeile

Die Gültigkeitsbereiche der beiden Kopfzellen "Ostdeutschland" und "Westdeutschland" wurden im HTML-Code mit dem Attribut scope="colgroup" jeweils auf die gesamte Spaltengruppe erweitert. Zu Beginn der Tabelle wurden entsprechend 3 Spaltengruppen durch colgroup-Elemente definiert. Der zur Tabelle gehörende HTML-Code:

<table summary="...">
  <caption>
     Deutsche Schulabsolventinnen und -absolventen 2003
  </caption> 
  <colgroup span="1"/>
  <colgroup span="2"/>
  <colgroup span="2"/>
  <thead>
     <tr>
        <td></td>	
        <th colspan="2" scope="colgroup">Ostdeutschland</th>
        <th colspan="2" scope="colgroup">Westdeutschland</th> 	
     </tr>
     <tr>
        <th scope="col">Abschluss</th>
        <th scope="col">Frauen</th>
        <th scope="col">Männer</th> 	
        <th scope="col">Frauen</th>
        <th scope="col">Männer</th> 	
     </tr>
  </thead>
  <tbody>
     <tr>
        <td scope="row">Hochschulreife</td>	  
        <td>31,0%</td>	  
        <td>21,3%</td>	  
        <td>27,5%</td>	  
        <td>21,1%</td>	  
     </tr>
     <tr>
        <td scope="row">Realschulabschluss</td>	  
        <td>47,7%</td>	  
        <td>44,7%</td>	  
        <td>40,9%</td>	  
        <td>36,7%</td>	  
     </tr>
     <tr>
        <td scope="row">Hauptschulabschluss</td>	  
        <td>14,1%</td>	  
        <td>20,4%</td>	  
        <td>25,3%</td>	  
        <td>31,9%</td>	  
     </tr>
     <tr>
        <td scope="row">ohne Abschluss</td>	  
        <td>7,3%</td>	  
        <td>13,6%</td>	  
        <td>6,4%</td>	  
        <td>10,3%</td>	  
     </tr>
  </tbody>
</table>

Folgende Grafik zeigt die zur Datenzelle mit dem Inhalt "40,9 %" gehörenden Kopfzellen.

Beispiel-Screenshot: Tabelle mit Spaltengruppen in der Kopfzeile, farbliche Markierungen zeigen die Zuordnungen Beispiel-Screenshot: Tabelle mit Spaltengruppen in der Kopfzeile, farbliche Markierungen zeigen die Zuordnungen

Von der Datenzelle aus findet der Algorithmus eines Screenreaders die Kopfzellen wie folgt:

  • nach links wird die Zelle "Realschulabschluss" mit dem Attribut scope="row" gefunden
  • nach oben wird zunächst die Zelle "Frauen" mit dem Attribut scope="col" gefunden
  • weiter nach oben wird die Zelle "Westdeutschland" mit dem Attribut scope="colgroup" gefunden

Ein Screenreader könnte nun für die in der Grafik markierten Datenzelle mit dem Inhalt "40,9 %" folgendes ausgeben:

"Realschulabschluss, Frauen, Westdeutschland, 40,9 %"

Es existiert auch die Möglichkeit horizontale Tabellenbereiche zu gruppieren und für diese eine zuständige Kopfzelle zu bestimmen. Zur Gruppierung ist es nötig die Tabelle mit mehreren tbody-Elementen in Bereiche zu gliedern. Die zuständige Kopfzelle muss innerhalb des Bereichs liegen und mit dem Attribut scope="rowgroup" markiert sein. Für die bereits weiter oben gezeigte Tabelle "Sozialversicherungspflichtig Beschäftigte" wären dies die Kopfzellen mit dem Inhalt "2009" und "2010":

Beispiel-Screenshot: Tabelle mit Zeilengruppen, farbliche Markierungen zeigen die Zuordnungen Beispiel-Screenshot: Tabelle mit Zeilengruppen, farbliche Markierungen zeigen die Zuordnungen

Im folgenden Quellcodeausschnitt ist zu sehen, dass der Tabellenkörper durch zwei tbody-Elemente in zwei horizontale Bereiche geteilt wurde. Die Datenzellen in der ersten Spalte wurden durch scope="rowgroup" als Kopfzellen für alle Datenzellen im Gültigkeitsbereich des umgebenden tbody-Elements markiert.

<table summary="...">
  ...
   <tbody class="y2009">
     <tr>
        <td scope="rowgroup" rowspan="4">2009</td>
        <td>März</td>
        <td>25.684.935</td>
        <td>82.060</td>
     </tr>
     ...
  </tbody>
  <tbody class="y2010">
     <tr>
        <td scope="rowgroup" rowspan="4">2010</td>
        <td scope="row">März</td>
        <td>25.791.044</td>
        <td>106.109</td>
     </tr>
     ...
  </tbody>
</table>

Bitte beachten Sie, dass das tbody-Element den Gültigkeitsbereich bestimmt und nicht das rowspan-Attribut der Kopfzelle!

komplexe Tabellen

Ist eine Tabelle noch komplexer, stößt das Verfahren mittels des scope-Attributs Kopfzellen und Datenzellen zuzuordnen, an die Grenzen. Tabellen mit weiteren überspannenden Kopfzellen vertragen sich mit dieser Art der Zuordnung nicht. Dies hat unter anderem den einfachen Grund, dass weder die colgroup-Elemente, noch mehrere tbody-Elemente geschachtelt werden können. Das folgende Beispiel zeigt eine solche Tabelle. Die Überschriften der dritten Zeile können mit dem Attribut {{{1}}} den Spalten zugeordnet werden. Die Spalten für "Frauen" und "Männer" können durch das colgroup-Element als Gruppen markiert werden und durch das Attribut {{{1}}} jeweils den beiden zugehörigen Spalten zugeordnet werden. Für die erste Zeile "Westdeutschland/Ostdeutschland" funktioniert dies aber leider nicht mehr, eine übergeordnete Spaltengruppe kann nicht mehr definiert werden.

Beispiel-Screenshot: Tabelle mit mehreren verschachtelt überspannenden Kopfzellen Beispiel-Screenshot: Tabelle mit mehreren verschachtelt überspannenden Kopfzellen


Ein weiteres Problem sind ältere Kombinationen aus Screenreader und Browser, die ihrerseits Probleme mit dem Scope-Verfahren haben und diese Technik nur unzureichend unterstützen. Die Definition von Geltungsbereichen von Kopfzellen ist für die Erstellerin oder den Ersteller zwar eine recht einfache und intuitive Methode der Zuordnung, für einen Screenreader ist aber die Umkehrung, das Finden der zuständigen Kopfzellen, aufwendig.

HTML bietet eine zweite Methode an, um Kopfzellen mit Datenzellen zu verbinden, diese Methode ist für die Erstellerin oder den Ersteller zwar aufwendiger, aber für den Screenreader auch bei sehr komplexen Tabellen eindeutig und trotzdem leicht zu handhaben. Bei dieser Methode werden alle Kopfzellen mit einem eindeutigen id-Attribut versehen. In den Datenzellen kann dann mittels des headers-Attributs auf die zugehörigen Kopfzellen verwiesen. Hierzu ist eine Liste der Ids der Kopfzellen als Wert des headers-Attributs anzugeben. Folgender Ausschnitt eines HTML-Codes soll diese Zuordnungsmethode illustrieren:

<table summary="...">
   ...
   <thead>
      <tr>
         <td rowspan="3"></td>	
         <th id="west" colspan="4">Westdeutschland</th>
         <th id="east" colspan="4">Ostdeutschland</th>
      </tr>
      <tr>
         <th id="female1" colspan="2">Frauen</th>
         <th id="male1"   colspan="2">Männer</th> 	
         <th id="female2" colspan="2">Frauen</th>
         <th id="male2"   colspan="2">Männer</th> 	
      </tr>
      <tr>
         <th id="sb1">schwer­behindert</th>
         <th id="nb1">nicht behindert</th> 	
         <th id="sb2">schwer­behindert</th>
         <th id="nb2">nicht behindert</th> 	
         <th id="nb3">schwer­behindert</th>
         <th id="nb3">nicht behindert</th> 	
         <th id="sb4">schwer­behindert</th>
         <th id="nb4">nicht behindert</th>
      </tr>
   </thead>
   <tbody>
      ...
      <tr>
         <th id="row2">befristet</th>
         <td headers="row2 west female1 sb1">5,8%</td>	  
         <td headers="row2 west female1 nb1">10,9%</td>	  
         <td headers="row2 west male1 sb2">5,4%</td>	  
         <td headers="row2 west male1 nb2">10,4%</td>	  
         <td headers="row2 east female2 sb3">11,8%</td>	  
         <td headers="row2 east female2 nb3">15,6%</td>	  
         <td headers="row2 east male2 sb4">13,8%</td>	  
         <td headers="row2 east male2 nb4">17,6%</td>	  
      </tr>
      ...
   </tbody>
   ...
</table>

Ein Screenreader kann nun recht einfach anhand der Id-Liste alle zu einer Datenzelle zugehörigen Kopfzellen finden und deren Inhalte vorlesen.

Beispiel-Screenshot: Tabelle mit mehreren verschachtelt überspannenden Kopfzellen, farbliche Markierungen zeigen Zuordnungen. Beispiel-Screenshot: Tabelle mit mehreren verschachtelt überspannenden Kopfzellen, farbliche Markierungen zeigen Zuordnungen.

Das Beispiel oben zeigt die Zuordnung für die Datenzelle mit dem Wert "10,4 %". Das headers-Attribut hat den Wert "row2 west male1 nb2". In den Kopfzellen mit diesen Ids finden sich folgende Werte:

  • row2: "befristet"
  • west: "Westdeutschland"
  • male: "Männer"
  • nb2: "nicht behindert"

Der Screenreader kann also nun die Zahl zusammen mit den Kopfzellen, die die Bedeutung der Datenzellen beschreibt, vorlesen:

"befristet, Westdeutschland, Männer, nicht behindert, 10,4 %"

Großer Vorteil dieser Methode ist, dass fast beliebige Tabellenstrukturen semantisch beschrieben werden können und bei Bedarf kann auch die Reihenfolge der Kopfzellen festgelegt werden.

Weiterführende anschauliche Erklärungen zu barrierefreien Datentabellen unter anderem anhand von Beispielen und Hörproben historischer Fußballbundesliga-Tabellen finden Sie im Artikel "Benimmregeln für Datentabellen" von Tomas Caspers bei der Initiative "Einfach für alle".

Tabellen-Verständnis

Die oben genannten Techniken reichen aus, um eine Tabelle technisch barrierefrei nach BITV zu erstellen. Nur weil es technisch möglich ist, heißt dies jedoch nicht, dass die Tabellen auch verständlich und leicht zu erfassen sind. Wenn Sie eine Datentabelle verwenden, sollten sie immer bedenken, ob die Komplexität der Tabelle wirklich der gewünschten Aussage angemessen ist. Autoren neigen dazu, zu viele Daten in einer einzigen Tabelle verarbeiten zu wollen. Sie sollten immer überlegen, ob es nicht möglich ist, eine komplexe Tabelle in mehrere leichter zu erfassende Tabellen aufzuteilen.

Es ist zum Beispiel technisch möglich, eine Tabelle mit dem Wahlergebnis einer Bundestagswahl darzustellen, in der sowohl die absolute Anzahl der Erst- und Zweitstimmen, die prozentualen Anteile der Stimmen, die Gewinne und Verluste zur vorherigen Wahl und die Sitzverteilung im Bundestag dargestellt werden. Weitaus verständlicher und einfacher in HTML umzusetzen und für die Nutzerinnen und Nutzer verständlicher, wären aber gewiss vier einzelne Tabellen.

Abkürzungen für Kopfzellen

Häufig sind die Inhalte von Kopfzellen relativ lang verfasst und beinhalten auch kurze Erläuterungen. Durch das wiederholte Vorlesen beim Erfassen einer Tabelle sind diese langen Erläuterungen häufig unnötig redundant und die Tabelle wird schwieriger zu verstehen. HTML bietet hier die Möglichkeit zusätzlich zum Inhalt der Kopfzelle eine Abkürzung anzugeben. Ein Screenreader kann dann bei Wiederholungen die Abkürzung der Kopfzelle anstelle des langen Inhalts vorlesen. Die Abkürzungen werden mit dem abbr-Attribut des th- oder td-Elements festgelegt.

In einer Tabelle mit den gemeinsamen Grenzen Deutschlands und seiner Anliegerstaaten könnte eine Kopfzelle wie folgt aussehen:

<th abbr="Kilometer">Länge der gemeinsamen Grenze in Kilometer</th>

Die Wiederholung des vollständigen Textes "Länge der gemeinsamen Grenze in Kilometer" bei allen 9 Anliegerstaaten wäre für blinde Menschen kein Mehrwert. Beim wiederholten Vorlesen würde das Wort "Kilometer" vollkommen ausreichen.

Mit Abkürzung ist im Fall des Attributs abbr immer eine aussprechbare verkürzte Schreibweise gemeint, nicht die Abkürzung im Sinn eines Akronyms oder eines Initialworts — eines Wortes zusammengesetzt aus den Anfangsbuchstaben mehrerer Wörter. Aus diesem Grund wurde im oberen Beispiel auch das Wort "Kilometer" verwendet und nicht die Kurzform "km". An diesem Beispiel zeigt sich auch der Unterschied zum Element abbr, mit dem eine Langversion zu einem Kurzwort (einer Abkürzung im üblichen Sinn) angegeben werden kann.

Unterstützung durch JavaScript und CSS

JavaScript und Cascading Style Sheets (CSS) bieten weitere Möglichkeiten um Tabellen für alle Menschen leichter Handhabbar zu machen. Zum Beispiel erhöht es die Lesbarkeit, wenn Tabellenzeilen abwechselnd farblich oder grau hinterlegt werden. Aktuelle Browser unterstützen dazu die CSS-Pseudo-Klasse :nth-child(n) mit der gezielt gerade und ungerade Zeilen angesprochen werden können.

Folgendes Beispiel erzeugt eine Tabelle mit einem weißen Hintergrund für gerade Tabellenzeilen und einen leicht grauen Hintergrund für die ungeraden Zeilen

tr:nth-child(2n+0) {background-color:#ffffff} /* gerade */
tr:nth-child(2n+1) {background-color:#f0f0f0} /* ungerade */

Beispiel-Screenshot: Tabelle mit zeilenweise abwechselnd grauen und weißen Hintergrund Beispiel-Screenshot: Tabelle mit zeilenweise abwechselnd grauen und weißen Hintergrund

Mit CSS ist es auch möglich die aktuell unter dem Maus-Zeiger befindliche Tabellenzeile farblich hervorzuheben. Sehenden Menschen kann dies beim Lesen helfen, die aktuelle Zeile in breiten Tabellen nicht zu verlieren. Im CSS kann dazu die Pseudo-Klasse :hover verwendet werden.

tr:hover {background-color:#f0f0d0}

Das Beispiel zeigt wie die 3. Zeile, welche sich unter dem Maus-Zeiger befindet, hervorgehoben wird. Die Daten zu der Zeile sind somit für das Auge leichter als Ganzes zu erfassen. Wenn Sie solche Techniken verwenden möchten, sollten zusätzlich nach Möglichkeiten suchen, den selben Effekt auch für Tastaturnutzer zugänglich zu machen.

Beispiel-Screenshot: Tabelle mit hervorgehobener Zeile unter dem Maus-Zeiger Beispiel-Screenshot: Tabelle mit hervorgehobener Zeile unter dem Maus-Zeiger

Ähnliche Effekte können auch durch den Einsatz von JavaScript automatisiert für ältere Browser erzeugt werden. Im Internet kann man unter dem Stichwort "Zebra Tables" weiter Informationen zu diesem Thema finden. Interessant ist auch die Möglichkeit Tabellenzeilen oder -Spalten durch Maus-Klicks hervorzuheben. Ein Vergleich verschiedener Zeilen ist dadurch einfach möglich. Weiterführende Artikel zu JavaScript und Datentabellen:

Vorschau HTML 5

Wenn Sie bereits HTML 5 nutzen, sollten Sie beachten, dass eine Tabelle, die nach den Techniken der WCAG — also BITV-konform — erstellt wurde, nicht validieren wird. Es wird unter anderem bemängelt, dass das summary-Attribut für Tabellen und das scope-Attribut für td-Elemente nicht mehr aktuell sind. Die HTML5-Spezifikation hat zum heutigen Zeitpunkt noch den Status eines Entwurfs (W3C Working Draft 29 March 2012) und die dort formulierten Definitionen vertragen sich noch nicht mit den Forderungen der WCAG 2.0 und deren Technikdokumenten. Es bleibt abzuwarten, wie diese Widersprüche zum Thema Datentabellen aufgelöst werden können.

© Bundesministerium für Arbeit und Soziales