Dieser Artikel wirft einen Blick auf Tabellen in HTML aus Sicht der Barrierefreiheit. Wie werden sie erzeugt und worauf ist zu achten, um Barrieren gar nicht erst aufkommen zu lassen?

Tabellen sind eine gute Möglichkeit, um Informationen gegenüberzustellen. Dadurch lässt sich viel Inhalt Platz sparend unterbringen. Während der sehende Mensch tabellarisch aufbereitete Informationen sehr schnell erfassen kann, verhält es sich bei mir als blindem Menschen etwas anders. Einfach gesagt liest ein Screenreader jede Tabellenzelle einzeln. Zusätzlich zum Zelleninhalt lassen sich die Zellkoordinaten vorlesen bzw. auf der braillezeile ausgeben. Beispielhaft könnte so eine Tabellenzelle “0,8 Spalte 4, Zeile 3” lauten.

Wer sich jetzt eine große Tabelle mit vielen Werten vorstellt versteht, dass eine solche Ausgabe sehr schnell unübersichtlich wird. Die gute Nachricht ist, dass eine ordentlich strukturierte Tabelle ganz automatisch für mehr Übersicht sorgt. Erstmal schauen wir uns aber an, wie Tabellen überhaupt in HTML eingebunden werden .

Bestandteile

Eine Tabelle in HTML besteht zunächst aus drei Abschnitten.

Innerhalb dieser drei Abschnitte gibt es wiederum drei Elemente.

Jetzt haben wir ein Sechs-Teile-Puzzle. Machen wir uns also an das sinnvolle Zusammenbauen.

Aufbau

Eine Tabelle in HTML wird mit dem Tag <table> eingeleitet. Darauf folgt der Table Header, indem sich wiederum eine Tabellenzeile mit den Kopfzellen befinden. Darauf folgt der Table Body mit Tabellenzeilen, die aus mehreren Tabellenzellen bestehen. Gleiches geschieht mit dem folgenden Table Footer.

Klarer wird es in der Praxis:

<table>
<thead>
<tr><th>2020</th><th>2021</th></tr>
</thead>
</table>

In diesem Beispiel wurde eine Tabelle mit einem Tabellenkopf, einer Zeile und zwei Überschriftenzellen erstellt. Das Ganze sieht dann so aus:

20202021

Zwei Dinge fallen hier auf. Würde man die Tabelle befüllen, gäbe es keine Zuordnung von Daten. Links müsste also im Header eine leere Zelle erstellt werden. Und es gibt noch keinen Inhalt. Beidem nehme ich mich im folgendem Beispiel an. :

<table>
<thead>
<tr><td></td><th>2020</th><th>2021</th></tr>
</thead>
<tbody>
<tr><td>Ist Weihnachten schon vorbei?</td><td>Ja</td><td>Nein</td></tr>
</tbody>
</table>

Im Ergebnis ergibt das dann:

20202021
Ist Weihnachten schon vorbei?JaNein

Jetzt wird man sich fragen, wann diese Daten beispielsweise erhoben wurden. Diese Information lässt sich im Footer unterbringen. Das birgt den Vorteil, dass beim Ausdrucken längerer Tabellen diese Information auf jeder Seite zu sehen ist.

<table>
<thead>
<tr><th></th><th>2020</th><th>2021</th></tr>
</thead>
<tbody>
<tr><td>Ist Weihnachten schon vorbei?</td><td>Ja</td><td>Nein</td></tr>
</tbody>
<tfoot>
<tr><td>Zeitpunkt der Datenerhebung</td><td colspan="2">Die Daten wurden im Februar 2021 erhoben.</td> </tr>
</tfoot>
</table>

Das ergibt dann eine Tabelle mit Header, Body und Footer:

20202021
Ist Weihnachten schon vorbei?JaNein
Zeitpunkt der DatenerhebungDie Daten wurden im Februar 2021 erhoben.

Barrierefreie Gestaltung

Bisher haben wir den generellen Aufbau einer Tabelle gelernt und wie diese in HTML umzusetzen ist. Doch wie können tabellen barrierefrei für Screenreader gestaltet werden?

Spaltenüberschriften

In den Beispielen ist aufgefallen, dass im Header - also im Tabellenkopf mit <th>gearbeitet wurde. Diese Information nutzen Screenreader während der Navigation innerhalb der Tabelle. Je größer die Tabelle wird, desto weniger wahrscheinlich ist es, das man einen Überblick über die Spalten der Tabelle hat. Der Screenreader liest jede Zelle nämlich für sich genommen. Auch wenn es Befehle zum Lesen einer kompletten Tabellenzeile bzw. einer Tabellenspalte gibt.

Bewege ich mich von einer Spalte in die Nächste, gibt mir der Screenreader erst die Spaltenüberschrift gefolgt von dem Wert der Tabellenzelle aus. Damit entfällt für mich der Weg zum oberen Ende der Tabelle, an dem ich selbst im Zweifel nachschauen müsste, wozu der Wert eigentlich gehört.

Zeilenüberschriften

Ich habe bei Screenreadern sowohl das Verhalten erlebt, dass beim Zeilenwechsel die erste Zelle der Zeile vorgelesen wurde als auch, dass nur die Zelle vorgelesen wurde, in der ich mich befand. Um hier ein einheitliches Verhalten zu erzwingen empfiehlt es sich, die erste Spalte ebenfalls mit <th>zu befüllen. Aus unserem Beispiel würde also Folgendes werden:

<table>
<thead>
<tr><th></th><th>2020</th><th>2021</th></tr>
</thead>
<tbody>
<tr><th>Ist Weihnachten schon vorbei?</th><td>Ja</td><td>Nein</td>
</tbody>
<tfoot>
<tr><th>Zeitpunkt der Datenerhebung</th><td colspan="2">Die Daten wurden im Februar 2021 erhoben.</td> </tr>
</tfoot>
</table>

Für die Vollständigkeit hier nochmal die Tabelle gerendert.

20202021
Ist Weihnachten schon vorbei?JaNein
Zeitpunkt der DatenerhebungDie Daten wurden im Februar 2021 erhoben.

Wechsle ich jetzt die Zeile, so wird mir die erste Zelle der Zeile ausgegeben bevor ich den Wert der Zelle bekomme, auf der ich mich befinde.

Das war jetzt aber sehr theoretisch.

Wie sich Spalten - und Zeilenüberschriften in der Praxis auswirken und was passiert, wenn diese fehlen, zeige ich im folgenden Screencast.

Nochmal in Kürze

Screenreader lesen jede Zelle individuell aus. Mit Spalten- und Zeilenüberschriften lässt sich die Orientierung innerhalb einer Tabelle extrem erleichtern. Eine Tabelle, die das nicht hat, wirkt ungefähr wie diese Tabelle auf sehende Menschen:

Screenshot einer Tabelle, in der optisch nicht deutlich wird, welcher Wert zu welcher Spaltenüberschrift gehört

Noch Fragen?

Um solche Fallstricke von vornherein zu vermeiden, rufen Sie mich gerne unter 030 280 400 an.

Dennis Westphal

Weitere interessante Artikel