Komplexe Tabellen ohne Kopfschmerzen: Kopfzellen und Zusammenfassungszeilen in Datentabellen

Eine einfache Datentabelle mit einer einzelnen Zeile von Spaltenüberschriften oben lässt sich relativ einfach zugänglich machen. Der eigentliche Ärger beginnt bei komplexen Tabellen – solchen mit Überschriften in Spalten und Zeilen, zusammengeführten Zellen oder Zusammenfassungszeilen. In diesem Artikel wird erläutert, wie Tabellenüberschriften mit Tags versehen werden, damit ein Screenreader für jede Zelle „versteht“, welche Überschriften auf sie zutreffen, ohne den Kontext zu verlieren.

Warum sich TH von TD unterscheidet

In einer HTML-Tabelle oder einem getaggten PDF hat jede Zelle einen von zwei Rollentypen: TH (Tabellenkopf) oder TD (Tabellendaten – eine reguläre Datenzelle). Der Unterschied ist nicht unbedingt visueller Natur – eine Header-Zelle und eine Datenzelle können identisch gestaltet sein –, sondern ist semantischer Natur: TH teilt dem Screenreader mit, dass es sich um eine Header-Zelle handelt, die erklärt, was die Daten darunter oder daneben bedeuten. Ohne korrekte Kennzeichnung bewegt sich ein Screenreader Zeile für Zeile durch die Tabelle, als ob jede Zelle gleich wäre, und es kann leicht passieren, dass der Überblick darüber verloren geht, welche Daten zu welcher Kategorie gehören.

Wenn der Umfang ausreicht und Sie mehr benötigen

Für die meisten Tabellen fügen Sie eine hinzuBereichAttribut für jede TH-Zelle, um anzugeben, ob es sich um eine Spaltenüberschrift handelt (scope="col") oder einen Zeilenkopf (scope="row"). Wenn ein Bildschirmlesegerät eine Datenzelle erreicht, sagt es automatisch sowohl die entsprechende Spaltenüberschrift als auch die Zeilenüberschrift an – der Benutzer hört also beispielsweise „1.200 – Umsatz, Q1“ statt nur ein einzelnes „1.200“.

Bei besonders komplexen Tabellen mit mehr als zwei Headerebenen (z. B. einem Superheader, der mehrere Unterspalten gruppiert) reicht der Umfang allein nicht immer aus. Verwenden Sie in diesen Fällen das Attributpaar id und headers: Geben Sie jeder Header-Zelle eine eindeutige ID und in jeder Datenzellenliste im headers-Attribut alle für sie relevanten Header-IDs. Diese Methode ist flexibler, aber auch komplexer und fehleranfälliger – reservieren Sie sie nur für Fälle, in denen sie wirklich benötigt wird.

Zusammenfassungszeilen und mehrere Überschriften

Eine Zusammenfassungszeile am Ende einer Tabelle („Gesamt“, „Durchschnitt“) ist selbst eine Art Kopfzeile – normalerweise ist es angebracht, die Gesamtzelle selbst als TH mit „scope="row“ zu kennzeichnen, damit ein Screenreader sie von einer regulären Datenzeile unterscheidet. Ebenso erfordert eine Tabelle mit einem Superheader, der mehrere Spalten gruppiert (z. B. „Umsatz 2026“, der sich über „Q1“, „Q2“ erstreckt), die korrekte Verwendung voncolspan-Attribut zusammen mit dem Bereich, sodass die hierarchische Gruppierung auch beim Vorlesen erhalten bleibt.

Wie das in der Praxis in Word und PDF aussieht

In Word wird durch die Verwendung des Standardtools „Einfügen ▸ Tabelle“ und das Aktivieren von „Kopfzeile“ im Tabellendesign die richtige Grundlage erstellt, die in den meisten Fällen automatisch als TH in PDF exportiert wird. In Acrobat lohnt es sich nach dem Export aus Word und der Durchführung einer Barrierefreiheitsprüfung, den Tag-Baum zu öffnen und zu bestätigen, dass die Header-Zellen tatsächlich als TH und nicht als normales TD markiert wurden – dies ist ein häufiger Exportfehler, der leicht übersehen werden kann.