Tabellen sind eine gute Möglichkeit, um Informationen gegenüberzustellen. Dadurch lässt sich viel Inhalt platzsparend 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.
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.
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:
| 2020 | 2021 |
|---|
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. Beider Umstände nehme ich mich im folgenden 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:
| 2020 | 2021 | |
|---|---|---|
| Ist Weihnachten schon vorbei? | Ja | Nein |
Jetzt wird man sich fragen, wann diese Daten beispielsweise erhoben wurden. Solche Information lässt sich im Footer unterbringen. Das birgt den Vorteil, dass beim Ausdrucken längerer Tabellen diese Angabe 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:
| 2020 | 2021 | |
|---|---|---|
| Ist Weihnachten schon vorbei? | Ja | Nein |
| Zeitpunkt der Datenerhebung | Die Daten wurden im Februar 2021 erhoben. | |
Bisher haben wir uns den generellen Aufbau einer Tabelle vergegenwärtigt und gesehen, wie diese in HTML umzusetzen ist. Doch wie können Tabellen barrierefrei für Screenreader gestaltet werden?
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. -spalte gibt.
Bewege ich mich von einer Spalte in die nächste, gibt mir der Screenreader 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.
Ich habe bei Screenreadern sowohl 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>
Der Vollständigkeit halber steht hier noch einmal die gerenderte Tabelle:
| 2020 | 2021 | |
|---|---|---|
| Ist Weihnachten schon vorbei? | Ja | Nein |
| Zeitpunkt der Datenerhebung | Die 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.
Wie sich Spalten- und Zeilenüberschriften in der Praxis auswirken und was passiert, wenn diese fehlen, zeige ich im folgenden Screencast.
Screencast: Tabellen im Screenreader
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: