HTML-Standards
HTML 4.01 stellt in für die altbekannten Tabellen-Tags eine Reihe von Zusatzattributen bzw. -tags bereit, die assistive Software das "Verständnis" tabellarischer Darstellen erleichtern bzw. überhaupt erst ermöglichen.
| Attribut | Tag | Beschreibung |
|---|---|---|
| abbr | th, td | Enthält eine Kurzbeschreibung des Zelleninhaltes |
| axis | th, td | Definiert eine Liste von Kategorien, zu denen die Zelle gehört |
| caption | - | Definiert eine Überschrift für eine Tabelle |
| headers | td | Stellt die Referenz von eine Datenzelle zu einer Kopfzelle her |
| scope | th | Stellt Bezüge von einer Kopfzelle zu Datenzellen her |
| summary | table | Definiert einen Text, den eine assistive Software zur Beschreibung der folgenden Tabelle ausgeben kann |
| tbody | - | Definiert den Datenbereich einer Tabelle |
| tfoot | - | Definiert den Fussbereich einer Tabelle |
| thead | - | Definiert den Kopfbereich einer Tabelle |
Tags und Attribute zur barrierefreien Tabellendarstellung in HTML 4.01
Zum bessern Verständnis werden diese Tags/Attribute im folgenden nicht alphabetisch besprochen, sonder stattdessen in der logischen Reihenfolge ihres Auftretens.
Grundlegender Aufbau einer Tabelle
<caption>Länderliste</caption>
<thead>
..
</thead>
<tfoot>
..
</tfoot>
<tbody>
..
</tbody>
</table>
Aufbau einer Tabelle
Ein Screen-Reader würde zunächst die in "summary" notierte Zusammenfassung der Tabelle vorlesen. Da die einzelnen Blöcke der Tabelle über die bereitgestellten Tags definiert sind, kann eine assistive Software den Aufbau der Tabelle "begreifen".
Wichtig: möchte man mit den Elementen <thead>, <tbody> und <tfoot> arbeiten, müssen immer alle drei verwendet werden. Obwohl es unlogisch erscheint, lautete die korrekte Reihenfolge <thead>, <tfoot>, <tbody>. Kopf und Fuß dürfen pro Tabelle nur einmal vorkommen - der Körper kann beliebig oft eingesetzt werden.
Im <table>-Tag kann das Attribut "rules" gesetzt werden; es dient zur Definition von Visualisierungsregeln (Linien):
| Wert | Beschreibung |
|---|---|
| none | Standardeinstellung. Keine Darstellung von Linien, es sei denn, diese sind in "border" oder via CSS notiert |
| groups | Zeichnet horizontale Linien zwischen allen Tabellengruppen (Head, Body, Foot) |
| rows | Zeichnet nach jeder Tabellenzeile eine horizontale Linie |
| cols | Zeichnet nach jeder Tabellenspalte eine vertikale Linie |
| all | Zeichnet eine Linie um jede Spalte und jede Reihe |
Eigenschaften des "rules"-Attribut
Kopfbereich
<tr>
<th id="land" abbr="Land">Land</th>
<th id="hauptstadt" abbr="Hauptstadt">Hauptstadt</th>
<th id="kontinent" abbr="Kontinent">Kontinent</th>
</tr>
</thead>
Kopfbereich einer Tabelle
Der Tabellenbereich, welcher die Spaltenüberschriften enthält, wird als "Kopfbereich" bezeichnet und durch die Tags <thead>..<thead> ausgezeichnet. Jede Kopfzelle enthält eine eindeutige ID sowie über eine Kurzbeschreibung des Inhaltes (über "abbr"). Di ID wird benötigt, damit eine assistive Software im späteren Datenbereich eine Beziehung zu jeweiligen Kopfzelle herstellen kann.
Wichtig: jede ID ist einmalig und darf nicht mehrmals in einem HTML-Dokument verwendet werden. Sollten also mehrere Tabellen auf einer Seite eingesetzt werden, müssen deren ID-Auszeichnungen in den Kopfzellen "unique" sein. Bei Einsatz eines Content Management Systems (CMS) muss sich dieses darum kümmern und entsprechende IDs automatisch vergeben.
Inwieweit aktuelle Systeme dies beherrschen, ist offen. Für diese Funktionalität müsste der Kern des CMS modifiziert werden, welcher die eigentliche Erzeugung der Webseiten übernimmt.
Datenbereich
<tr>
<td headers="land">Deutschland</td>
<td headers="hauptstadt">Berlin</td>
<td headers="kontinent">Europa</td>
</tr>
<tr>
<td headers="land"><span lang="en">USA</span></td>
<td headers="hauptstadt"><span class="en">Washington</span></td>
<td headers="kontinent">Nordamerika</td>
</tr>
</tbody>
Datenbereich einer Tabelle
Der "eigentliche" Tabellenbereich mit den darzustellenden Daten wird durch die Tags <tbody>..<tbody> ausgezeichnet. Die in ihm enthaltenen Datenzellen (<td>..</td>) besitzen ein "headers"-Attribut, worüber eine Beziehung zur jeweiligen Kopfzelle hergestellt wird - dazu muss "headers" die gewünschte ID der Kopfzelle enthalten. Im Beispiel könnte ein Screen-Reader den Bezug also ausgeben als: "Land ist gleich Deutschland".
Bei der Verwendung von Kreuztabellen, in denen zwei Kopfzellen zu einer Datenzelle gehören, kann im "headers"-Attribut eine durch Leerzeichen separierte Liste von Ids notiert werden.
Das folgende Beispiel geht bei der Zuordnung von Datenzellen zu Kopfzellen einen anderen Weg und verwendet das "scope"-Attribut:
<tr>
<th scope="col" abbr="Land">Land</th>
<th scope="col" abbr="Hauptstadt">Hauptstadt</th>
<th scope="col" abbr="Kontinent">Kontinent</th>
</tr>
</thead>
<tbody>
<tr>
<td>Deutschland</td>
<td>Berlin</td>
<td>Europa</td>
</tr>
<tr>
<td><span lang="en">USA</span></td>
<td><span class="en">Washington</span></td>
<td>Nordamerika</td>
</tr>
</tbody>
Referenzen via "scope"
"scope" unterstützt vier verschiedene Modi:
| Wert | Beschreibung |
|---|---|
| col | Spaltenüberschriften: der Inhalt der Kopfzelle wird bei allen Datenzellen dieser Spalte wiederholt |
| row | Zeilenüberschrift: der Inhalt der Kopfzelle wird bei allen Datenzellen diese Zeile wiederholt |
| colgroup | Überschriften von Spaltengruppen: der Inhalt der Kopfzelle wird bei allen Zellen dieser Spaltengruppe wiederholt. Dazu müssen Spaltengruppen jedoch zuvor über <colgroup> definiert werden. |
| rowgroup | Zeilengruppen: der Inhalt der Kopfzelle wird bei allen Zellen der Zeilengruppe wiederholt. Dazu müssen jedoch Zeilengruppen über <thead>, <tbody> und <tfoot> definiert sein. |
Modi für "scope"
Spalten vordefinieren
Das tatsächliche Aussehen einer Tabelle ergibt sich aus den in ihr enthaltenen Inhalten. Für einen Webbrowser heißt das jedoch, dass er zunächst die komplette Tabelle einlesen und analysieren muss, bevor er sie darstellen kann. Je nach Umfang und Komplexität der Tabelle sowie der Arbeitsgeschwindigkeit des Clientrechners kann dies dazu führen, dass während des Seitenaufbaus leere Bildschirminhalte zu sehen sind. Über das Tag <colgroup> kann man dem Browser gleich zu Beginn der Tabelle mitteilen, wie viele Spalten diese hat. Dadurch kann der Aufbau der Tabelle beschleunigt werden. Im Hinblick auf die Barrierefreiheit bietet <colgroup> den Vorteil, dass eine Referenz von allen Datenzellen einer Spaltengruppe auf eine Kopfzelle hergestellt werden kann.
<colgroup>
<col width="150">
<col width="150">
<col width="200">
</colgroup>
<thead>
...
</thead>
...
</table>
Tabelle mit vordefinierten Spalten