Skip to content
A11Y-Tutorials

Datentabellen

Bei barrierefreien Datentabellen ist es wichtig, dass man die Zusammenhänge versteht. Die Überschriften und Daten gehören zusammen. Wenn die Benutzer verstehen, wie die Tabelle aufgebaut ist, können sie sie gut nutzen.

Beziehungen zwischen Überschriften und Daten

Für sehende Benutzer ist es einfach, den Zusammenhang zwischen Kopfzeilen und Datenzellen zu vermitteln, weil sie die Überschriften sehen können. Sie wissen auch, dass die Überschriften zu den Datenzellen in den entsprechenden Spalten oder Zeilen gehören.

Blinde Menschen können die Gitterstruktur nicht sehen. Deshalb muss man im Markup angeben, welche Kopfzeile zu welcher Datenzelle gehört. Wenn das Markup stimmt, lesen Screenreader die Header-Assoziationen für jede Datenzelle.

Barrierefreiheitsregeln für Tabellen

Regel 1: Alle Datentabellen müssen eine korrekte Header-Struktur haben Im Markup

Eine Tabelle mit Überschriften ist einfach. Man kann sie für die Spalten oder für die Zeilen machen. Du kannst einfach die Zellen als Kopfzellen festlegen. Dafür verwendest du das Tag <th> für die Tabellenüberschrift im Markup. Wenn es mehrere Schichten von Kopfzeilen gibt, werden damit andere Überschriften gruppiert, wie in dieser Tabelle. Die Gruppierungsköpfe müssen bezeichnet werden, entweder als “colgroup” für die Spaltengruppe oder als “rowgroup”. Für Screenreader werden beide Schichten von Kopfzeilen gelesen, wenn man zu Datenzellen navigiert.

Regel 2: Auf der anderen Seite, alle Tabellen, die nur für das visuelle Layout verwendet werden Darf keine Kopfzeilen haben

Die Kopfzeilen der Tabelle enthalten keine nützlichen Informationen und sind deshalb irreführend.

Beste Lösung 1: Geben Sie der Tabelle mithilfe eines caption-Elements einen Namen. Oder aria-label oder aria-labelledby.

Wenn Text über oder unter einer Tabelle angezeigt wird, sollte man ihn als Tabellenbeschriftung markieren. Das hilft auch Screenreader-Benutzern. Wenn die Tabelle einen Namen hat, können Screenreader-Nutzer den Namen vorlesen, wenn sie auf der Tabelle landen. So verstehen sie besser, was die Tabelle macht.

Beste Lösung 2: Vermeiden Sie Überschriften in der Mitte einer Tabelle.

Wenn man Überschriften in der Mitte einer Tabelle platziert, wird das Markup komplizierter und anfälliger für Fehler. Das Ergebnis kann verwirrend sein, weil es unerwartet ist. Benutzer wissen nicht immer, ob es eine Datenzelle oder eine Kopfzelle ist.

Beste Lösung 3: Vermeiden Sie übergreifende oder verbundene Datenzellen

Wenn die Kopfstruktur korrekt vermittelt wird, sind diese Tabellen verständlich. Aber sie sind immer noch verwirrend für Personen, die sie nicht sehen können. Das visuelle Layout ähnelt einem Puzzle, das sich nur allmählich offenbart. Während sie durch die Tabelle navigieren, nutzen sie eine Sprachausgabe. Wenn der NVDA-Screenreader eingeschaltet ist, drücken Sie einfach T, um in einer Tabelle zu navigieren. Wenn die Seite mehrere Tabellen enthält, gelangen Sie mit der T-Taste zu jeder Tabelle. Mit Umschalttaste plus T kann man in Tabellen auf einer Seite rückwärts navigieren. Die Beschriftung der Tabelle wird vorgelesen, während Sie auf der Tabelle landen.

In der Tabelle können Sie mit der Pfeiltaste nach unten und oben navigieren. Drücken Sie gleichzeitig Strg + Alt + Pfeiltaste, um nach links und rechts zu navigieren. Sie können in alle Richtungen navigieren. Sie sollten die Sprachausgabe hören. Die Sprachausgabe sagt Ihnen, welche Zelle welche Überschrift hat.