Kaum ein HTML-Element hat die Geschichte des Markups wohl mehr geprägt als Tabellen. Vor 20 Jahren waren sie die Geheimwaffe zur Umsetzung mehrspaltiger Layouts. Nur wenig Code war nötig und man konnte moderne, gut skalierende Websites bauen. Doch schnell hat man gemerkt, dass es zwar praktisch ist, aber viele Nachteile mit sich bringt. Insbesondere für Nutzer von Screenreadern ist es wichtig, dass Elemente so eingesetzt werden, wie sie vom Standard vorgesehen sind. Nur dann funktionieren Shortcuts und Vorlesefunktion wie erhofft. Deshalb schauen wir uns doch mal an, wie man Tabellen barrierefrei einsetzt und wieso nicht jede Tabelle auch wirklich eine Tabelle sein sollte.
Datentabelle oder Layouttabelle – wo liegt der Unterschied?
Beginnen wir damit uns zu überlegen: Habe ich überhaupt eine Tabelle vor mir? Denn nicht alles, was aussieht wie eine Tabelle, ist auch eine. Man spricht hier von Datentabellen, also im Sinne von HTML echten Tabellen, und Layouttabellen. Die sehen zwar aus wie Tabellen, werden aber anders umgesetzt. Um beide zu unterscheiden helfen zwei Eselsbrücken, die wir uns einzeln anschauen.
Linearisierbarkeit – Kann ich es hintereinander lesen ist es eine Layouttabelle
Linearisierbar heißt, dass ich alle Inhalte auch in eine lange Zeile schreiben könnte. Würde ich den Zusammenhang der Daten dann immernoch verstehen? Dann handelt es sich semantisch um keine Tabelle. Diese besteht nämlich aus Zeilen und Spalten, wobei jeder Zeile und Spalte eine eigene Überschrift gegeben werden kann. Der Sinn einer einzelnen Zelle dieser Tabelle ergibt sich dann nur aus beiden Überschriften. Ein klassisches Beispiel linearisierbarer Inhalte sind mehrspaltige Layouts von Formularen oder News-Übersichten. Ob diese nebeneinander oder untereinander stehen spielt für das Verständnis keine Rolle, sie sind beliebig linearisierbar. Die Mehrspaltigkeit dient nur dem Design – eine Layouttabelle.
Solche Layouts würde man richtigerweise mit HTML-Elementen wie section, article oder dem neutralen div umsetzen. Sie strukturieren Seitenbereiche, ohne aber einen Zusammenhang dieser eigentlich unabhängigen Elemente vorzutäuschen. Die Mehrspaltigkeit wird mit CSS erreicht.
Zwei Spalten ergeben meistens keine Tabelle
Oft sieht man Tabellen, in denen die Spaltenüberschriften im bestenfalls mit „Kategorie“ und „Wert“ beschriftet werden können. Stellen Sie sich beispielsweise die Kontaktdaten Ihrer Website vor. In Spalte 1 befinden sich „E-Mail“, „Telefon“, „Fax“ usw. In Spalte 2 dann die entsprechenden Daten. Auch FAQs sind häufig so strukturiert: Frage links, Antwort rechts. Zum Einen trifft auf diese Tabellen natürlich auch die Linearisierbarkeit zu. Semantisch ähneln Sie aber oft alle eher einem Glossar. Erst wird ein Begriff definiert, der anschließend näher erläutert wird.
Für diese Elemente gibt es ein eigenes HTML-Element: die Definitionsliste (dl). Diese besteht aus Termen (dt), welche mit beliebig vielen Definitionen oder Beschreibungen versehen werden können (dd). Ursprünglich nur für klassische Glossare und damit echte Definitionen gedacht, wird inzwischen eine Verwendung für jede Form der Name-Wert Beziehung gestattet.
Ausnahmen dieser Regel gibt es aber. Nehmen wir an, Sie wollen eine statistische Auswertung der Zugriffszahlen auf Ihre Website über die Jahre hinweg darstellen, wobei jede Spalte ein Jahr und jede Zeile eine Inhaltsseite ist. Im ersten Jahr werden Sie demnach nur zwei Spalten haben: Der Name der Seite und die Werte für das Jahr 2024. Da aber weitere Werte folgen werden, und es mit der Spaltenüberschrift des Jahres auch eine deutlich konkretere Definition als „Wert“ gibt, würde man hier keine Definitionsliste, sondern eine echte Tabelle mit nur zwei Spalten pflegen.
Einfache Tabellen barrierefrei umsetzen
Nachdem wir nun ausgeschlossen haben, dass es sich bei unserem Vorhaben um eine Layouttabelle oder eine Definitionsliste handelt, können wir recht sicher sein, eine echte Datentabelle vor uns zu haben. Hier ein kleines Beispiel für eine einfache Tabelle.
| Vorname | Nachname | Geburtsdatum |
|---|---|---|
| Max | Mustermann | 1. Februar 1976 |
| Erika | Mustermann | 12. September 1945 |
Das Markup für diese Tabelle sieht so aus:
<table summary="Die erste Zeile zeigt die Überschriften, alle weiteren Zeilen listen die Personen der Familie Mustermann mit ihren Geburtstdaten auf.">
<thead>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<th>Geburtsdatum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max</td>
<td>Mustermann</td>
<td>1. Februar 1976</td>
</tr>
<tr>
<td>Erika</td>
<td>Mustermann</td>
<td>12. September 1945</td>
</tr>
</tbody>
<caption class="wp-element-caption">Familie Mustermann</caption>
</table>tbody, thead und tfoot – Das Gerüst
So wie die meisten Websites über eine grobe Einteilung in Seitenkopf, Inhalt und Seitenfuß verfügen, lässt sich dieses Prinzip auch auf Tabellen anwenden. Die meisten Tabellen besitzen eine Zeile für die Überschriften und einen großen Inhaltsteil für die eigentlichen Daten. In manchen Tabellen findet man zusätzlich einen Tabellenfuß, beispielsweise für Summen oder Durchschnittswerte der gesamten Daten. Durch die 3 Elemente thead (Tabellenkopf), tbody (Daten) und tfoot (Tabellenfuß) lässt sich diese Semantik hervorragend mitgeben. Screenreadern fält es so leichter zu verstehen, welche Bedeutung die Bereiche für die Daten haben.
td und th – Daten und ihre Überschriften
Die Daten von Tabellen haben immer eine eindeutige Überschrift, das wurde schon beim Unterschied zwischen Datentabellen, Layouttabellen und Definitionslisten klar. Das Datum in unserem Beispiel hat keinen Sinn, wenn wir nicht wissen, dass es sich um den Geburtstag handelt. Für sehende Nutzer ist dieser Zusammenhang klar, der Blick geht schnell zur Tabellenüberschrift. Nutzer mit Sehbeeinträchtigungen, die einen Screenreader oder andere Assistenzsysteme nutzen, navigieren jedoch von Zelle zu Zelle. Sie können dabei beliebig zwischen Spalten und Zeilen springen. Dadurch ist ein schneller Zugriff aber nur dann möglich, wenn klar ist, was die zu einer Zelle gehörige Überschrift ist.
In einfachen Tabellen wie dieser ist das unkompliziert über die HTML-Elemente th und td gelöst. In td-Elementen stehen die eigentlichen Daten, in th-Elementen stehen dagegen Überschriften. Standardmäßig gelten diese für alle Zellen derselben Spalte.
Wollen Nutzer von Screenreadern jetzt also wissen, was das Datum für eine Bedeutung hat, können Sie sich über einen Shortcut die zugehörige Spaltenüberschrift vorlesen lassen.
summary und caption – Tabellen barrierefrei näher beschreiben
Unter Umständen benötigt Ihre Tabelle für Nutzer etwas mehr Erklärung. Das kann von einer kurzen Zusammenfassung des Inhalts bis hin zur Beschreibung eines doch nicht so einfachen Aufbaus reichen. Je nach Zielgruppe dieser Beschreibung stehen 2 verschiedene Möglichkeiten zur Verfügung, die auch gemeinsam verwendet werden dürfen.
caption
Eine caption dient als eine Art Tabellenüberschrift und wird sichtbar ausgegeben. Sie kann eine Tabelle und deren Daten kurz beschreiben, wenn diese nicht intuitiv verständlich sind.
summary
Das Attribut summary wird nicht ausgegeben, sondern nur von Screenreadern vorgelesen. Demnach dient es vor allem der Beschreibung von Dingen, die sehenden Nutzern zwar klar ist, die für die Bedienung mit einem Screenreader aber hilfreich sind. Das heißt, im summary wird vor allem die Struktur von Tabellen erklärt. Caption und summary dürfen zwar gemeinsam verwendet werden, sollten sich dann aber nicht doppeln. Für einfache Tabellen wie unsere ist eine solche Beschreibung eigentlich nicht notwendig, die Struktur ist der einfachste Standard für Tabellen. Nutzen Sie das summary aber gern, wenn Sie von diesem Standard abweichen.
Eine kurze aber gute Erklärung zum Einsatz bietet das Tutorial des W3C zum Einsatz von summary und caption auf Englisch.
Was, wenn es komplizierter wird – komplexe barrierefreie Tabellen
Werden Tabellen komplexer, dann stehen viele weitere Möglichkeiten zur Verfügung, um jeder Zelle genau zuzuordnen, welche Überschriften sie beschreiben. Auch mehrzeilige Tabellenköpfe, Zeilenüberschriften und Zellen, die sich über mehrere Spalten oder Zeilen erstrecken sind möglich. Schreiben Sie mir gern, wenn Sie Tipps zur Umsetzung Ihrer Daten brauchen.
Auch barrierefreie Diagramme können komplexe Daten anschaulich visualisieren. Nutzen Sie diese zusätzlich zu den Daten, um Nutzern zu erklären, was Sie mit den Tabellen eigentlich aussagen wollen.