Einstieg in Barrierefreies Webdesign

Seitdem es grafische Browser gibt, wurden die Tabellen unter HTML gerne als Hilfsmittel für das Layout verwendet, weil zu dieser Zeit die gängigen Webbrowser CSS nicht richtig umsetzten und deswegen andere Wege benutzt wurden, Inhalte anzuordnen. Der Zweck von Tabellen war das eigentlich nicht, wenn man die Regelungen des W3C betrachtet. Auch für eine barrierefreie Seite ist ein tabellenbasiertes Layout eher die falsche Wahl. Grundsätzlich soll man Tabellen nutzen, wenn es tabellarische Inhalte gibt, wie zum Beispiel Statistiken. Ansonsten ist eher davon abzuraten, da das W3C Layouttabellen missbilligt! Und die BITV meint dazu:

Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup - Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden. BITV - Priorität 1 , Anforderung 5

Man sollte auch nicht den umgekehrte Herangehensweise machen, nämlich versuchen aus anderen HTML - Elementen eine Tabelle zu bauen. Viele Webdesigner verstehen den Aufruf "Keine Layouttabellen!" falsch und versuchen die Verwendung von Tabellen rigoros zu vermeiden und diese mit div - Elementen aufzubauen. Eine solche Methode verursacht nur einen riesigen Aufwand und hindert die Barrierefreiheit. Deswegen: table - Element verwenden, wenn eine Tabelle notwenig ist!

Grundlegender Aufbau

Für eine einfache Tabelle genügen schon tr -, th - und td - Elemente um eine zu beschreiben, wie das folgende Beispiel für eine simple Tabelle zeigt.

Das tr - Element legt eine Tabellenzeile fest und die td - und th - Elemente jeweils eine Zelle. Zu beachten ist, dass das th - Element dafür verwendet wird um Überschriften und Beschreibungen innerhalb einer Tabelle kennzuzeichnen, während td - Elemente, die eigentlichen Daten beinhalten, was man sehr schön im oberen Beispiel sehen kann. Das th - Element wird von den meisten Webdesignern eher stiefmütterlich behandelt, ist aber von hoher Bedeutung für die Barrierefreiheit. Denn durch diese Elemente können auch die Screenreader die Beschreibungen besser den Daten zuordnen, als wenn die Tabellenzellen nur aus td - Elementen bestehen würden.

Manche Tabellen können auch Ausmaße erreichen, in denen nur die Anwendung von den oben genannten Elementen zu einer unübersichtlichen Tabelle führen könnte. Mit solchen Tabellen könnten Anwendungen wie Screenreader nur schlecht damit umgehen. Für solche Fälle gibt es für die Tabelle weitere Elemente.

Strukturierter Aufbau

Eine komplexe Tabelle könnte wie das folgende Beispiel aussehen - Beispiel für eine komplexe Tabelle. Im Unterschied zu der einfachen Tabelle, wird eine strukturierte in Bereiche aufgeteilt. Sie läßt sich unter HTML auch in die logischen Bereiche Kopfbereich, Datenbereiche und Fußbereich aufteilen. Dadurch wird die Tabelle übersichtlicher und ist leichter mit CSS - Selektoren für Layoutangaben zugänglich. Ein weiterer Vorteil liegt beim Drucken einer HTML - Seite. Bei einem modernen Browser werden dann die Kopf- und Fußbereiche bei jeder Seite wiederholt.

Für diese Bereiche liegen folgende Elemente vor:

für den Kopfbereich

thead - Element

für Datenbereiche

tbody - Element

für den Fuß;bereich

tfoot - Element

Diese Bereiche haben ihre eigenen Tabellenzeilen und Zellen. Die Reihenfolge dieser Bereiche spielt keine Rolle, da der Browser die Reihenfolge selbst erstellen kann.

Überschriften

Bei Überschriften und Beschreibungen von Tabellen muss diese BITV - Bedingung beachtet werden:

Für Überschriftenzellen sind unter der Verwendung der hierfür vorgesehenen Elemente der genutzen Markup-Sprache Abkürzungen bereitzustellen. BITV - Priorität 2, Bedingung 5.6

Daher nimmt man für Überschriften von (großen) Tabellen das caption - Element. Ähnliche Verwendung hat das summary - Attribut von dem Element table. Der Unterschied dazwischen ist, dass der Inhalt des summary - Attributes nicht direkt vom Benutzer betrachtet werden kann. So ist dieser nur zum Beispiel in Mozilla Firefox unter Eigenschaften im Kontextmenü - Rechtsklick auf die Tabelle - sichtbar. Der Zweck des summary - Attributs ist eigentlich nur die Zusammenfassung des Inhaltes oder die Erklärung des Tabellenlayouts für Screenreader. Die Verwendung des caption - Elements als Überschrift hat auch den Vorteil, dass dieser explizit von CSS selektiert werden kann und mit Layout- und Schrifteigenschaften belegt werden kann.

Dieses Element sollte stets gleich an erster Stelle innerhalb eines table - Elementes stehen:

<table summary="Ein Wochenplan, der zeigt wann welche Vorlesungen sind" >
<caption>Vorlesungsplan MI2 SS 2007</caption>
<tr> ......

Abkürzungen

Da man das th - Element mehreren Datenzellen zuordnen kann, kann es zu störenden Wiederholungen in Screenreadern kommen. Um das ein wenig zu mildern empfiehlt es sich im th - Element das abbr - Attribut zu verwenden, siehe folgendes Beispiel.

<tr><th>Umsatzerhöhung in Tausend Euro</th><td>1.000</td> [... </tr>
<tr><th>Umsatzerhöhung in Tausend Euro</th><td>4.000</td> [...] </tr>
<tr><th>Umsatzerhöhung in Tausend Euro</th><td>7.000</td> [...] </tr>
etc....

Nun klänge dies in einem Screenreader folgendermaßen:

Umsatzerhöhung in Euro - 1000 - Umsatzerhöhung in Euro - 4000 - Umsatzerhöhung in Euro - 7000 - etc.

Die ständige Wiederholung kann sehr unangenehm für den Nutzer werden. Um für einen leichteren Sprechfluss des Screenreaders zu sorgen, sollte man im th - Element das abbr - Attribut mit sinnvollen Inhalt verwenden.

<tr><th>Umsatzerhöhung in Tausend Euro</th><td>1.000</td> [... </tr>
<tr><th abbr="Euro" >Umsatzerhöhung in Tausend Euro</th><td>4.000</td> [...] </tr>
<tr><th abbr="Euro" >Umsatzerhöhung in Tausend Euro</th><td>7.000</td> [...] </tr>
etc....

Der Scrennreader nimmt an Stelle des Inhaltes des th - Elements das abbr - Attribut falls vorhanden. Nun liest der Screenreader die Tabelle folgendermaßen

Umsatzerhöhung in Euro - 1000 - Euro - 4000 - Euro - 7000 - etc.

Es wird zwar immer noch wiederholt, aber mit den "Abkürzungen" wirkt es angenehmer für den Anwender eines Screenreaders.

Zuordnung von Datenzellen an Beschreibungszellen

Das scope - Attribut

Bei komplexeren Tabellen können nicht alle Screenreader die Beschreibungen einer Tabelle den Daten eindeutig zuordnen. Vor allem wenn diese zweidimensional ist, wie zum Beispiel ein Stundenplan. Um nun die Zuordnung zu unterstützen, wie es die BITV vorschreibt, gibt es für das th - Element das scope - Attribut. Mit scope definiert man einen Geltungsbereich in der Tabelle, für den die Beschreibung gilt. Folgende Geltungsbereiche stehen zur Verfügung:

scope="col"

Überschrift giltet für alle Zellen innerhalb der Spalte der Beschriftungszelle

scope="row"

Überschrift giltet für alle Zellen in der Reihe der Beschriftungszelle

scope="colgroup"

Überschrift giltet für alle Zellen, die vom colgroup Attribut der Beschriftungszelle erfasst werden.

scope="rowgroup"

Überschrift giltet für alle Zellen, die vom rowgroup - Attribut der Beschriftungszelle

Bei scope="col-/rowgroup" ist unbedingt darauf zu achten, dass das col-/rowgroup - Attribut dabei ist! Es klingt vielleicht am Anfang etwas verwirrend, aber an Hand von folgenden Beispielen wird es klarer.

<table summary="Entwicklung des Frauenanteils der Studenten an der Hochschule Offenburg">
<caption> in Prozent</caption>
<tr><th scope="col">Jahr</th><th scope="col">Frauenanteil</th></tr>
<tr><th scope="row">1990</th><td>39%</td></tr>
<tr><th scope="row">1991</th><td>41%</td></tr>
...

Das scope - Attribut ermöglicht eine Kontrolle über die Linearisierung der Tabelle für Screenreader oder ähnliche Anwendungen. Die linearisierte Ausgabe sähe so aus:

Jahr - 1990 - Anteil 39%
Jahr - 1991 - Anteil 41% ...

Das header - Attribut bei kompliziertem Tabellen

Nun können Tabellen so kompliziert verschachtelt sein, dass die Zuweisung mit scope alleine nicht ausreicht. In so einem Fall benutzt man die id - und header - Attribute für die Zellen.

• Mit dem id - Attribut werden die Beschreibenden Zellen (th - Elemente) eindeutig gekennzeichnet
• Das header - Attribut bekommen die Zellen, denen eine Beschreibende Zelle zugewiesen wird. Im header - Attribut stehen dann die ids von den th - Elemeten

Hier ein Beispiel für eine Tabelle mit header - und id - Attributen.

Wie man sehen kann, kann man einer Zelle mehrere beschreibende Zellen zuweisen. Die Reihenfolge der ids im header - Attribut gibt auch die Folge wieder, in der der Screenreader die beschreibenden Elemente ausliest. Ein sinnvoller Screenreader liest dann auch zuerst die beschreibenden vor den Datenzellen vor. Das Beispiel könnte dann so vorgelesen werden:

Die Parteien im Bundestag – Abgeordnetensitze
Wahl 1983 SPD 193 CDU/CSU 244 FDP 34 Grüne 27 PDS 0
Wahl 1987 SPD 186 CDU/CSU 223 FDP 46 Grüne 42 PDS 0