Barrierefreie Datentabellen

Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.

Größentabellen, Produktspezifikationen, Versandkosten, Bestellverlauf, Vergleichstabellen – Shops haben mehr Tabellen, als sie denken. Screenreader-Nutzer navigieren Zelle für Zelle durch Tabellen und hören zu jeder Zelle die Überschrift, aber nur, wenn die Überschriften im Code stehen. Diese Seite gehört zur Reihe barrierefreie UI-Muster.

Wann Sie eine Tabelle einsetzen

Verwenden Sie eine Tabelle, wenn Daten in zwei Dimensionen zusammenhängen: Zeilen und Spalten, die beide etwas bedeuten (Größe × Maß, Land × Versandkosten). Nutzen Sie Tabellen nicht für das Layout und bauen Sie tabellarische Daten nicht aus div-Elementen, die wie ein Raster gestaltet sind.

Das APG-Muster für Tabellen beschreibt eine Tabelle als statische Struktur, die „kein interaktives Widget ist“, und sagt: „Autoren wird dringend empfohlen, wann immer möglich ein natives HTML-table-Element zu verwenden.“ Enthalten viele Zellen interaktive Widgets, kann das APG-Grid-Muster die Zahl der Tab-Stopps verringern – aber ein Grid ist ein zusammengesetztes Widget mit eigenem Pfeiltasten-Modell und in einem Shop selten nötig.

Relevante WCAG-Kriterien

1.3.1 Info und Beziehungen (A): Kopfzellen und ihre Datenzellen sind im Code verknüpft.
1.3.2 Bedeutungstragende Reihenfolge (A): Die Lesereihenfolge ergibt Sinn, wenn die Tabelle linearisiert wird.
1.4.10 Umfluss (Reflow) (AA): Das W3C nennt Datentabellen (nicht einzelne Zellen) als Inhalt, der zweidimensionales Scrollen brauchen kann; der Rest der Seite muss weiterhin umfließen.
2.1.1 Tastatur (A): Eine horizontal scrollende Tabelle muss sich per Tastatur scrollen lassen.
4.1.2 Name, Rolle, Wert (A): Sortier-Buttons haben Namen, und der Sortierzustand wird bereitgestellt.
2.4.6 Überschriften und Beschriftungen (Labels) (AA): Beschriftungen und Überschriften beschreiben den Inhalt.

Codebeispiel

<!-- Simple table: headers in the first row and first column -->
<table>
  <caption>Größentabelle für Damenjeans, in Zentimetern</caption>
  <thead>
    <tr>
      <th>Größe</th>
      <th>Taille</th>
      <th>Hüfte</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>S</th><td>66–70</td><td>92–96</td></tr>
    <tr><th>M</th><td>71–75</td><td>97–101</td></tr>
  </tbody>
</table>

<!-- Sortable column: a button in the header, aria-sort on the header cell -->
<th aria-sort="ascending">
  <button type="button">Preis</button>
</th>

<!-- Wide table on small screens: a focusable, named scroll container -->
<div class="table-scroll" role="region" aria-label="Versandkosten" tabindex="0">
  <table>…</table>
</div>

Hinweise:

Die W3C-Technik H51 heißt „Verwendung von Tabellen-Markup zur Darstellung tabellarischer Informationen“. H63 behandelt scope (row, col, rowgroup, colgroup): nötig, wenn Überschriften nicht in der ersten Zeile oder Spalte stehen; für einfache Tabellen mit Überschriften in der ersten Zeile oder Spalte genügt ein schlichtes th. Für komplexe Tabellen mit Überschriften auf mehreren Ebenen nutzt H43 id und headers.
caption benennt die Tabelle. Täuschen Sie sie nicht mit einer fett gesetzten ersten Zeile oder einer nicht verbundenen Überschrift darüber vor.
Laut APG gehört aria-sort an die Kopfzelle der sortierten Spalte; setzen Sie es immer nur an eine Spalte.
Werden Zeilen seitenweise geladen oder virtualisiert, teilen aria-rowcount und aria-rowindex assistiven Technologien die volle Größe mit.

Tastaturbedienung

Das APG führt die Tastaturbedienung für das Tabellenmuster als „nicht zutreffend“ auf: Eine Tabelle ist kein Widget, und ihre Zellen sind nicht fokussierbar. Screenreader haben eigene Befehle zur Tabellennavigation. Interaktive Elemente in Zellen – Links, Sortier-Buttons, Mengenfelder – sind gewöhnliche Tab-Stopps.

Taste	Funktion
Tab	Springt zum nächsten Link, Button oder Feld in der Tabelle
Pfeiltasten (wenn der Scroll-Container den Fokus hat)	Scrollen eine breite Tabelle horizontal
Tabellenbefehle des Screenreaders	Bewegen sich Zelle für Zelle; die Überschrift jeder Zelle wird angesagt

Typische Fehler in Online-Shops

Größentabellen als Bilder ohne Texttabelle oder als Tabellen ganz ohne th.
Spezifikationslisten aus div-Elementen, die wie zwei Spalten aussehen, aber keine Struktur haben – nehmen Sie eine Tabelle oder eine Beschreibungsliste.
Layout-Tabellen aus alten E-Mail-artigen Templates, mit th ausgezeichnet.
Vergleichstabellen mit verbundenen Kopfzellen und ohne headers-Attribute.
Eine fett gesetzte erste Zeile statt einer caption oder th.
Breite Tabellen, die auf Mobilgeräten über die Seite hinauslaufen, oder ein Scroll-Container, den Tastaturnutzer nicht erreichen.
Sortierlinks ohne Zustand, sodass Nutzer die aktuelle Reihenfolge nicht kennen.

Was automatische Prüfungen finden und was manuell zu testen ist

Automatisch (axe-core-Regel)	Was sie findet
`td-has-header`	Datenzellen in größeren Tabellen ohne Überschrift
`th-has-data-cells`	Kopfzellen, die keine Datenzellen beschreiben
`td-headers-attr`	`headers`-Attribute, die aus der Tabelle hinausweisen
`table-fake-caption`	Eine erste Zeile, die als Beschriftung dient
`empty-table-header`	Kopfzellen ohne Text (Hinweis)
`scope-attr-valid`	Ungültige `scope`-Werte (Hinweis)
`table-duplicate-name`	Beschriftung und Zusammenfassung mit demselben Text (Hinweis)
`scrollable-region-focusable`	Ein scrollender Container, den Tastaturnutzer nicht erreichen

Alle sind Karten in unserer Regelbibliothek. Manuelle Tests: Entscheiden Sie, ob jede Tabelle Daten oder Layout ist, prüfen Sie, dass die Überschriften korrekt und sinnvoll sind, navigieren Sie mit den Tabellenbefehlen eines Screenreaders und prüfen Sie die Tabelle auf einem Bildschirm mit 320 CSS-Pixeln Breite.

Starten Sie die kostenlose Prüfung einer Seite auf einer Produktseite mit Größentabelle. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Wie mache ich eine Tabelle barrierefrei?

Verwenden Sie für tabellarische Daten eine echte HTML-Tabelle, zeichnen Sie Kopfzellen mit th aus, ergänzen Sie scope, wo die Überschriften nicht einfach in der ersten Zeile oder Spalte stehen, geben Sie der Tabelle eine caption und verwenden Sie Tabellen nicht für das Layout.

Wann brauche ich das Attribut scope?

Die W3C-Technik H63 sagt, einfache Tabellen mit Überschriften in der ersten Zeile oder Spalte funktionieren mit schlichten th-Elementen; scope hilft, wo Überschriften woanders stehen. Für komplexe Tabellen mit mehrstufigen Überschriften nutzen Sie die Attribute id und headers (H43).

Sollte ich role="table" oder role="grid" verwenden?

Bevorzugen Sie das native table-Element; das APG empfiehlt es ausdrücklich, wann immer möglich. Ein Grid ist ein interaktives zusammengesetztes Widget mit Pfeiltasten-Navigation und nur sinnvoll, wenn eine Tabelle viele interaktive Zellen enthält.

Wie zeige ich, nach welcher Spalte sortiert ist?

Setzen Sie aria-sort="ascending" oder "descending" an die Kopfzelle der sortierten Spalte und bauen Sie das Sortierelement als Button innerhalb der Kopfzelle.

Kann eine automatische Prüfung Tabellen testen?

Sie findet Datenzellen ohne Überschriften, Überschriften ohne Datenzellen, defekte headers-Attribute, ungültige scope-Werte und falsche Beschriftungen. Sie kann nicht beurteilen, ob eine Tabelle wirklich eine Datentabelle ist oder ob die Überschriften sinnvoll sind.

Quellen

W3C WAI, APG Table pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
W3C, Technique H63 Using the scope attribute: https://www.w3.org/WAI/WCAG22/Techniques/html/H63
W3C WAI, APG Grid pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html