BARRIEREFREIHEIT ≠ OVERLAY · 36
Barrierefreie Tabellen: Daten brauchen Kontext, kein Overlay
📅 9. November 2026 · ⏱ 7 Min. Lesezeit
Eine Tabelle kann ordentlich aussehen und beim Vorlesen oder Vergrößern trotzdem unverständlich bleiben. Barrierefreiheit bedeutet, die Beziehungen zwischen jedem Wert, seiner Zeile und seiner Spalte zu erhalten.
01. Eine einzelne Zahl erklärt wenig
Stellen Sie sich vor, Sie prüfen die Öffnungszeiten eines Dienstes und hören nur „09:00, 10:00, 11:00, 12:00“. Ohne den zugehörigen Wochentag und das jeweilige Angebot können Sie keine sinnvolle Entscheidung treffen. Die Barriere entsteht, wenn der Zusammenhang ausschließlich durch einen Blick nach oben oder links erkennbar ist. Die Daten sind sichtbar, ihre Beziehungen aber für Software nicht verfügbar.
Bei einer Preistabelle gilt dasselbe. Ein Betrag kann einen Monatspreis, einen Jahrespreis oder einen Zuschlag bezeichnen. Müssen Menschen die Position sämtlicher Spalten auswendig behalten, wird die Suche zur Rekonstruktionsaufgabe. Das praktische Ziel lautet: Eine konkrete Frage soll selbstständig und ohne Vermutungen beantwortet werden können.
02. Prüfen Sie, ob eine Tabelle erforderlich ist
Tabellen eignen sich, wenn der Vergleich zwischen Zeilen und Spalten Bedeutung vermittelt: bei Öffnungszeiten, Tarifen, Eigenschaften oder Ergebnissen. Eine Anleitung oder eine kurze Beschreibung ist als Liste oder in Absätzen möglicherweise verständlicher. Die Informationsstruktur sollte die Entscheidung bestimmen, nicht das hübsche Raster eines Editors.
Verwenden Sie Tabellen auch nicht, um zwei unabhängige Inhaltsblöcke nebeneinander zu platzieren. Dafür sind CSS und Layoutkomponenten zuständig. Werden Gestaltung und Daten vermischt, kann eine assistive Technologie eine Tabellenstruktur ankündigen, die keinen Nutzen hat. Beschreiben Sie vor der Umsetzung den benötigten Vergleich und entfernen Sie Spalten, die nicht zur Aufgabe beitragen. Weniger Komplexität erleichtert anschließend auch die Pflege.
03. Überschriften müssen im Code erkennbar sein
Eine fett gedruckte erste Zeile mit blauem Hintergrund ist noch keine semantische Kopfzeile. Zellen, die Zeilen oder Spalten bezeichnen, sollten th verwenden; gewöhnliche Datenzellen verwenden td. Bei einfachen Tabellen können scope="col" und scope="row" die Richtung der jeweiligen Zuordnung ausdrücklich festlegen.
„Dienst“, „Montag“ und „Dienstag“ bezeichnen beispielsweise Spalten. „Beratung“ und „Support“ können Zeilen bezeichnen. Beim Abrufen einer Uhrzeit sind Dienst und Wochentag wichtig. Ergänzen Sie ARIA nicht pauschal, um native Semantik zu wiederholen. Prüfen Sie zuerst das erzeugte HTML und anschließend, wie die verwendete Kombination aus Browser und Screenreader die Beziehungen beim Wechsel zwischen einzelnen Zellen tatsächlich vermittelt.
| Dienst | Montag | Dienstag |
|---|---|---|
| Beratung | 09:00 | 10:00 |
| Support | 11:00 | 12:00 |
04. Ein hilfreicher Titel und eine kurze Orientierung
Ein caption hilft, die Tabelle zu identifizieren. „Öffnungszeiten der Dienste“ sagt mehr aus als „Tabelle 1“. Der Titel sollte sie von anderen Tabellen unterscheiden, ohne dass zunächst sämtliche vorherigen Absätze gelesen werden müssen. Wichtige Angaben zu Zeitraum, Währung oder Einheit gehören in die Tabelle oder in eine zugeordnete Erläuterung.
Bei komplexeren Tabellen kann zusätzlich eine kurze Beschreibung des Aufbaus sinnvoll sein. Erklären Sie etwa, dass jede Spaltengruppe ein Quartal darstellt. Diese Orientierung ersetzt die Überschriften der einzelnen Zellen nicht. Vermeiden Sie lange Beschreibungen, die sämtliche Werte wiederholen. Sie sollen die gezielte Suche erleichtern und nicht verlangen, dieselben Informationen vorab ein zweites Mal anzuhören.
05. Vereinfachen Sie vor dem Zusammenführen
Verbundene Zellen und mehrstufige Überschriften erschweren Verständnis und Wartung. Prüfen Sie vor ihrem Einsatz, ob mehrere kleinere Tabellen mit präzisen Titeln geeigneter wären. Zwei Zeiträume zu trennen kann mehr bewirken als zusätzliche Attribute in einem sehr großen Raster. Die verständliche Darstellung beginnt deshalb bereits bei der redaktionellen Auswahl.
Ist die Komplexität erforderlich, müssen Gruppen und Zuordnungen bewusst modelliert werden. Je nach Aufbau kommen scope="colgroup", scope="rowgroup" oder Verknüpfungen mit id und headers infrage. Diese Techniken sind keine austauschbaren Rezepte für jede Tabelle. Testen Sie mittlere Zellen, Gruppengrenzen und verschiedene Bereiche. Eine korrekt vorgelesene erste Zeile belegt nicht, dass sämtliche Daten richtig zugeordnet werden.
06. Mobile Ansichten müssen Beziehungen bewahren
Wird die Schrift so weit verkleinert, dass die gesamte Tabelle auf ein Telefon passt, sind die Daten kaum noch lesbar. Spalten auszublenden, ohne einen anderen Zugang zu ihren Informationen anzubieten, löst das Problem ebenfalls nicht. Eine anpassungsfähige Darstellung muss die für Vergleiche und Entscheidungen erforderlichen Daten auch bei Vergrößerung verfügbar halten.
Für Inhalte, die zwei Dimensionen benötigen, kann ein horizontal verschiebbarer Bereich sinnvoll sein. Er muss bei Bedarf per Tastatur bedienbar sein und verständlich auf weitere Inhalte hinweisen. Werden Zeilen zu Karten, müssen Beschriftungen und Bedeutung im DOM erhalten bleiben. Prüfen Sie, ob die optische Umgestaltung Semantik entfernt oder die Zuordnung von Werten zu einer Ratesache macht.
07. Farben, Abkürzungen und leere Zellen
Eine grüne Zelle erklärt nicht von selbst „verfügbar“, ebenso wenig bedeutet Rot zwingend „ausgebucht“. Ergänzen Sie verständlichen Text oder ein anderes geeignetes Äquivalent und prüfen Sie die Kontraste von Text, Bedienelementen und wichtigen Anzeigen. Wechselnde Zeilenfarben können Orientierung unterstützen, dürfen aber nicht die einzige Grundlage für das Verständnis einer Beziehung sein.
Erklären Sie ungewohnte Abkürzungen und verwenden Sie Einheiten konsequent. Unterscheiden Sie null, unbekannte Daten und ein nicht verfügbares Angebot: Diese Zustände bedeuten Verschiedenes. Eine leere Zelle kann visuell und beim Vorlesen mehrdeutig sein. Die redaktionelle Angabe „Keine Daten“ verhindert, dass Stille als Zahlenwert oder als Fehler des Screenreaders verstanden wird. Solche Entscheidungen sollten für alle beteiligten Redakteure dokumentiert werden.
08. Sortierung und Filter müssen bedienbar sein
Ermöglicht eine Überschrift das Sortieren, braucht die Aktion ein klar benanntes, per Tastatur bedienbares Steuerelement. Der Sortierzustand sollte bei Bedarf programmatisch erkennbar sein; aria-sort kann ihn an der passenden Kopfzelle ausdrücken. Ein kleines Dreieck allein erklärt nicht, welche Spalte die aktuelle Reihenfolge bestimmt.
Nach dem Filtern sollte der Fokus vorhersehbar bleiben. Relevante Ergebnisse müssen gegebenenfalls mitgeteilt werden, ohne ständig neue Ansagen auszulösen. Testen Sie auch eine leere Ergebnisliste und das Zurücksetzen. Machen Sie aus einer Informationstabelle kein interaktives Grid mit besonderer Tastatursteuerung, wenn der Anwendungsfall es nicht erfordert. Zusätzliche Bedienmuster müssen ausdrücklich entworfen und überprüft werden, statt lediglich komplizierter zu wirken.
09. Prüfen Sie Aufgaben statt nur Auszeichnungen
Wählen Sie eine überprüfbare Frage: „Wann ist der Support am Dienstag erreichbar?“ Beantworten Sie sie zunächst visuell und dann mit einem Screenreader und dessen Tabellennavigation. Entscheidend ist nicht die Ansage, dass eine Tabelle existiert. Die richtige Zelle und ihre Überschriften müssen ohne Verlust des Zusammenhangs auffindbar sein.
Wiederholen Sie die Aufgabe mit Vergrößerung und in einem schmalen Fenster. Nutzen Sie die Tastatur für Schaltflächen, Filter und erforderliche Scrollbereiche. Nicht jede Zelle einer statischen Tabelle muss ein Tabstopp werden. Halten Sie Browser, assistive Technologie, beobachtetes Verhalten und die erwartete richtige Antwort fest. Damit wird aus einem allgemeinen Eindruck eine nachvollziehbare Prüfung.
10. Was automatische Werkzeuge und WCAG beitragen
Automatische Prüfwerkzeuge können bestimmte Strukturprobleme melden. Sie entscheiden jedoch nicht, ob eine Überschrift ihre Daten sinnvoll beschreibt oder ob kleinere Tabellen den Vergleich erleichtern würden. Auch sämtliche Filterzustände werden dadurch nicht automatisch validiert. Verbinden Sie die Meldungen mit Codeprüfung, redaktioneller Kontrolle und manuellen Aufgaben.
In WCAG 2.2 ist Erfolgskriterium 1.3.1, Info and Relationships, für Tabellen besonders relevant. Je nach Komponente spielen zusätzlich Tastaturbedienung, Kontrast, Umbruch und Statusmeldungen eine Rolle. Die Umbruchausnahme für Inhalte mit notwendigem zweidimensionalem Layout gilt nicht pauschal für die ganze Seite. Bewerten Sie jede anwendbare Anforderung gesondert und stellen Sie kein einzelnes Markuprezept als Garantie vollständiger Konformität dar.
11. WordPress und Divi an der Quelle korrigieren
Untersuchen Sie nach dem Speichern das HTML des Tabellenmoduls oder Plugins. Der Editor kann eine hervorgehobene erste Zeile anzeigen und trotzdem ausschließlich td-Zellen veröffentlichen. Auch das Einfügen aus einer Tabellenkalkulation kann unnötige Formatierungen oder verbundene Zellen erzeugen. Maßgeblich ist die tatsächliche Ausgabe, nicht allein die Ansicht im Builder.
Tritt derselbe Fehler in vielen Beiträgen auf, korrigieren Sie die gemeinsame Komponente oder Vorlage und dokumentieren Sie eine redaktionelle Regel. Ein Overlay kann nicht zuverlässig erschließen, ob eine Zahl Preis, Frist oder Prozentsatz bedeutet. Ebenso wenig kann es den benötigten Vergleich bestimmen. Visuelle Anpassungen können ergänzen; die Beziehungen zwischen Daten und Überschriften müssen im ursprünglichen Inhalt gelöst werden.
12. Auch morgen verständlich veröffentlichen
Prüfen Sie vor der Veröffentlichung Titel, Einheiten, Kopfzellen, Zuordnungen und das Verhalten auf schmalen Bildschirmen. Nehmen Sie eine konkrete Aufgabe in die redaktionelle Kontrolle auf und wiederholen Sie sie bei Änderungen an Daten oder Plugin. Eine korrekte Tabelle kann durch eine zusätzliche Spalte, verbundene Zellen oder Symbole anstelle von Textbeschriftungen unverständlich werden.
Beziehen Sie möglichst Menschen ein, die assistive Technologien verwenden, und berücksichtigen Sie ihre tatsächlichen Schwierigkeiten. Die beste Tabelle enthält nicht die meisten Attribute. Sie ermöglicht das Nachschlagen und Vergleichen, ohne den Aufbau gedanklich neu zusammensetzen zu müssen. Barrierefreiheit zeigt sich darin, dass jemand den richtigen Wert findet, seine Bedeutung versteht und damit eine eigene Entscheidung treffen kann.