Was in einer Tabelle steckt

Die th- und td-Elemente

Datentabellen bestehen aus Tabellenreihen, die aus der gleichen Zahl an Zellen bestehen müssen. Dabei können sich Zellen mit den colspan- und rowspan-Attributen über mehr als eine Spalte beziehungsweise mehr als eine Reihe erstrecken und müssen dann entsprechend oft gezählt werden. Die Anordnung der Zellen bildet ein Gitter.

Für die Reihen und Zellen werden folgende Elemente benötigt:

• Das tr-Element repräsentiert eine Tabellenreihe mit Zellen. Die Zellen werden nach Datenzellen (td-Element) und Kopfzellen (th-Element) unterschieden.
• Das td-Element definiert eine Datenzelle in einer Tabelle. Ein td-Element muss das unmittelbare Kindelement eines tr-Elements sein.
• Das th-Element definiert eine Kopfzelle in einer Tabelle. Ein th-Element muss das unmittelbare Kindelement eines tr-Elements sein. Die Beziehungen zwischen Kopfzelle und Datenzellen können Autoren gegebenenfalls mit den scope- und headers-Attributen festlegen. Die Inhalte von th-Elementen werden von allen gängigen Browsern standardmäßig fett und zentriert dargestellt.

Screenreader und Tabellen

Wenn Datenzellen und Kopfzellen nicht voneinander unterschieden werden, stehen Nutzende von Screenreadern vor Probleme. In Tabellen navigieren Nutzende von Screenreadern grundsätzlich von Zelle zu Zelle. Während sehende Nutzende die Kopfzellen mit einem kurzen Blick erfassen können, ist das mit einem Screenreader nur durch vorhandene Beziehungen zwischen Datenzellen und Kopfzellen möglich.

Screenreader bieten für Datentabellen umfängliche Funktionalität. Ein wichtiger Aspekt ist das Heranziehen der zugehörigen Kopfzellen für eine Datenzelle. Wenn Sie beispielsweise von einer Datenzelle zur nächsten Datenzelle navigieren, kann der Screenreader die mit der Datenzelle assoziierten Kopfzellen ebenfalls vorlesen beziehungsweise anzeigen.

Hinweis: Welche Kopfzellen herangezogen werden, kann in einem Screenreader konfiguriert werden.

Rollen für Kopfzellen

Tabellenzellen können verschiedene Rollen erhalten. Die Rollen werden im Accessibility-Tree abgelegt und sind insbesondere für Screenreader wichtig:

• Eine Datenzelle erhält die Rolle "cell".
• Kopfzellen erhalten die Rolle "columnheader", wenn sie oben in einer Spalte stehen, und die Rolle "rowheader", wenn sie amAnfang einer Reihe stehen.

Kopfzellen können prinzipiell überall in einer Datentabelle vorkommen. Typischerweise werden die erste Reihe und/oder die erste Spalte einer Tabelle Überschriftencharakter aufweisen, zum Beispiel in der einfachsten Form:

Browser weisen den beiden Kopfzellen im vorherigen Beispiel die Rolle "columnheader" zu. Dies kann in den Entwicklerwerkzeugen eines Browsers überprüft werden.

Kopfzellen können genauso am Anfang einer Reihe stehen. Im folgenden Beispiel weisen Browser den Kopfzellen der ersten Spalte die Rolle "rowheader" und den Datenzellen die Rolle "cell" zu:

Die Zuweisung der korrekten Rollen können Browser in diesen Situationen zuverlässig vornehmen. Das gilt auch dann, wenn Kopfzellen sowohl in der ersten Reihe als auch in der ersten Spalte stehen. Wenn aber Kopfzellen an anderer Stelle im Gitter vorkommen oder wenn Zellen über mehr als eine Spalte oder über mehr als eine Reihe gestreckt werden, müssen die zugewiesenen Rollen überprüft werden. Gegebenenfalls muss die Beziehung zwischen Kopfzellen und Datenzellen mit den scrope- oder headers-Attributen explizit angegeben werden.

Kopfzellen in der ersten Reihe

Im folgenden Beispiel besteht die erste Reihe der Tabelle aus Kopfzellen. Die zweite und dritte Reihe bestehen aus Datenzellen.

Kopfzellen in der ersten Reihe einer Tabelle legen eine Beziehung zwischen sich selbst und zugehörigen Datenzellen fest. Stehen die Kopfzellen in der ersten Tabellenreihe, dann weisen Browser die Rolle "columnheader" zu. Welche Rolle Kopfzellen erhalten, kann in den Entwicklerwerkzeugen eines Browsers eingesehen werden, zum Beispiel in Chrome:

Mit der Rolle "columnheader" können Screenreader eine Beziehung zwischen der Kopfzelle und allen Datenzellen der gleichen Spalte herstellen. Wenn mit einem Screenreader in der dritten Reihe von der ersten zur zweiten Datenzelle navigiert wird, wird der Text "Frikadelle" mit dem Text "Hamburg" ergänzt.

Kopfzellen in der ersten Spalte

Eine Kopfzelle als erste Zelle einer Reihe stellt eine Beziehung zu allen Datenzellen der Reihe her:

Die Kopfzellen in diesem Beispiel erhalten in allen gängigen Browsern die Rolle "rowheader". Die Kopfzellen können den Datenzellen der Tabellenreihe zugeordnet werden.

Kopfzellen in der ersten Reihe und in der ersten Spalte

Einfache Tabellen können sowohl über Spalten- als auch über Reihenüberschriften verfügen. Auch im folgenden Beispiel erhalten die Spaltenköpfe die Rolle "columnheader" und die Reihenköpfe die Rolle "rowheader":

In diesem Beispiel sind die Kopfzellen alle eindeutig. Sollte die erste Zelle der ersten Spalte einen Inhalt haben, müssen Sie festlegen, dass die Zelle eine Kopfzelle ist. Standardmäßig werden Browser die Rolle "columnheader" für eine solche Kopfzelle festlegen. Sollte die erste Zelle eine Kopfzelle für die Reihe sein, kann ein scope-Attribut eingesetzt werden:

Auch wenn das scope-Attribut für einfache Tabellen normalerweise nicht erforderlich ist, kann es Ausnahmen geben, wie im folgenden Beispiel. Die erste Kopfzelle der ersten Reihe wird nachfolgend den anderen Kopfzellen der Reihe zugeordnet. Damit wird "Name" zusätzlich herangezogen, wenn Screenreader vertikal in die zweite, dritte oder vierte Kopfzelle der ersten Reihe navigieren:

Das abbr-Attribut

Screenreader können zugeordnete Kopfzellen einzelnen Datenzellen voranstellen, wenn Nutzende von Screenreadern durch die Datenzellen navigieren. In manchen Situationen können Kopfzellen aber uneindeutig, unverständlich oder auch sehr lang sein. In solchen Fällen kann das th-Element ein abbr-Attribut erhalten.

Wenn die Kopfzellen navigiert werden, lesen Screenreader den sichtbaren Text. Erst wenn die Kopfzellen zu anderen Zwecken herangezogen werden, etwa bei der Beschriftung einer Datenzelle, werden die alternativen Beschriftungen herangezogen und die eigentliche Beschriftung ersetzt. Das abbr-Attribut ist im Übrigen meist nicht erforderlich.