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

<table summary="Auflistung von Ländern, ihren Hauptstädten sowie dem Kontinent, auf dem sie sich befinden">
  <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

<thead>
  <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

<tbody>
  <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:

<thead>
  <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.

<table rules="cols">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
  </colgroup>
  <thead>
  ...
  </thead>
  ...
</table>

Tabelle mit vordefinierten Spalten