Was in einer Tabelle steckt

Vereinfachung von komplexen Tabellen

Komplexe Tabellen benötigen headers- oder scope-Attribute, um Datenzellen mit ihren zugehörigen Kopfzellen in Beziehung zu setzen. Auch bei korrekten Verknüpfungen zwischen Daten- und Kopfzellen kann es zu unerwarteten Ergebnissen in Screenreadern kommen. Daher fordert der HTML-Standard,

1. dass komplexe Tabellen vermieden werden müssen und
2. wenn die Darstellung in eine oder mehrere einfache Tabellen nicht möglich ist, dass der Aufbau von komplexen Tabellen zusätzlich beschrieben wird.

Nicht alle komplexen Tabellen werden vereinfacht werden können. Manchmal kann eine komplexe Tabelle aber umstrukturiert werden und in anderen Situationen kann eine komplexe Tabelle in mehrere einzelne einfache Tabellen oder andere Inhaltsformen verändert werden.

Beispiel 1: Umstrukturierung einer Tabelle

Wenn Sie eine komplexe Tabelle feststellen, dann sollten Sie überlegen, wie Sie die Tabelle vereinfachen können. Manche komplexe Tabellen können anders strukturiert werden und werden dadurch zu einfachen Tabellen.

Die folgende Tabelle ist eine komplexe Tabelle, weil in den Datenreihen die Kopfzellen nicht in der ersten Spalte stehen:

Damit diese Tabelle möglichst gut bei der Nutzung eines Screenreaders gelesen, verstanden und genutzt werden kann, müssen die Datenzellen mit den zugehörigen Kopfzellen in der mittleren Spalte verknüpft werden. Darüber hinaus muss die Tabelle beschrieben werden:

Die Tabelle kann aber vereinfacht werden, so dass weder Verknüpfungen von Zellen noch eine Beschreibung erforderlich ist. Die nachfolgende Tabelle vermittelt die gleichen Informationen wie die erste Tabelle, ist aber als einfache Tabelle aufgebaut. Als einfache Tabelle kann der Browser die Beziehungen zwischen Kopfzellen und Datenzellen ermitteln:

Beispiel 2: Aufteilung einer Tabelle

Bei der Vereinfachung einer komplexen Tabelle kann es notwendig sein, die komplexe Tabelle in einfachere Inhaltsformen aufzuteilen. Nachfolgend wird eine komplexe Tabelle durch zwei einfache Tabellen ersetzt.

In der folgenden Tabelle werden Tabellenüberschriften als Zwischenüberschriften eingesetzt. Ohne diese Beschriftungen wären die Daten in der Tabelle unklar. Diese Tabelle kann mit dem headers- oder mit dem scope-Attribut und mit einer Beschreibung der Tabelle WCAG- und HTML-konform gestaltet werden:

Hinweis: Die Beziehungen der Tabellenzellen werden im vorherigen Beispiel sowohl mit dem headers- als auch mit dem scope-Attributen angegeben. Die Datenzellen sind per headers-Attribut mit den zugehörigen Kopfzellen in der vertikalen Achse verknüpft. Die laufende Nummer auf der linken Seite wird mit einem scope-Attribut den Datenzellen der Reihengruppe zugewiesen.

Die komplexe Tabelle kann in einzelne einfache Tabellen umgewandelt werden. Die nachfolgenden Tabellen vermitteln die gleichen Informationen wie die komplexe Tabelle. Die Informationen werden in einem Screenreader dadurch besser nutzbar. Eine Verknüpfung zwischen Datenzellen und Kopfzellen ist nicht mehr erforderlich ebensowenig wie eine Tabellenbeschreibung:

Beispiel 3: Andere Inhaltsformen

Tabellen können manchmal durch Listen oder andere Elemente ersetzt werden. Das ist vor allem bei einfachen Tabellen der Fall. Eine Umsetzung als Liste ist dann sinnvoll, wenn die Lesereihenfolge in Screenreadern verbessert wird.

Eine einfache Tabelle mit Kopfzellen in der ersten Reihe kann beispielsweise als Beschreibungsliste aufbereitet werden. Im folgenden Beispiel folgen die "Datenzellen" unmittelbar auf ihre "Kopfzellen":

Der Verzicht auf Tabellen kann vor allem bei der Nutzung mit einem Screenreader gegeben sein. Screenreader orientieren sich normalerweise an der Reihenfolge, wie sie vom Code vorgegeben wird. In Tabellen ist die Lesereihenfolge nicht immer gut nachvollziehbar, sondern Nutzende von Screenreadern müssen in horizontaler und vertikaler Richtung navigieren, um Inhalte zu verstehen.

Ein "Vorteil" von Tabellen ist, dass Browser ein wenig beim Layout helfen. Tabellen sollten aber nur dann eingesetzt werden, wenn die Strukturen und Beziehungen es erfordern (etwa bei der kompakten Darstellung von größeren Datenmengen oder um Vergleiche und Zusammenhänge deutlicher darzustellen). CSS bietet für das Layout eine Vielzahl von Alternativen zum table-Element, wie etwa CSS Grid Layout, CSS Flexible Box Layout ("Flexbox"), CSS Multi-Column Layout, CSS-Positionierung oder das CSS Table Model.