Barrierefreie Datentabellen: Kopfzeilen korrekt zuordnen

In großen Tabellen sind einzelne Werte keiner Überschrift zugeordnet. Vorlese-Software kann dann nicht ansagen, wofür ein Wert steht. EverAudit prüft Datentabellen gegen WCAG 1.3.1 (Info and Relationships) und meldet fehlende oder fehlerhafte Header-Zuordnungen als Befund.

Was ist das Problem?#

Eine Datentabelle braucht mehr als nur eine optisch tabellarische Anordnung — Screenreader müssen technisch nachvollziehen können, welche Kopfzeile zu welcher Datenzelle gehört. Das geschieht über <th>-Elemente mit einem korrekt gesetzten scope-Attribut (col für Spalten, row für Zeilen). Fehlt diese Zuordnung, liest ein Screenreader die Zelleninhalte isoliert vor — ohne den Kontext, welche Spalte oder Zeile gerade gemeint ist.

Drei verwandte Fehler fasst diese Kategorie zusammen: fehlende Zuordnung einer Datenzelle zu einer Überschrift (td-has-header), eine Kopfzelle ohne zugehörige Datenzellen (th-has-data-cells), und ein ungültig gesetztes scope-Attribut (scope-attr-valid).

Warum prüft EverAudit das?#

Diese Regelfamilie wird als prio2-Befund geführt: Sie betrifft primär komplexere Tabellen mit mehreren Spalten oder Zeilen — bei einer einfachen Zwei-Spalten-Tabelle ist der Effekt geringer als bei einer umfangreichen Preisvergleichs- oder Datenübersichtstabelle, wo die korrekte Zuordnung für das Verständnis entscheidend ist. EverAudit meldet den Fehler, weil er in Content-getriebenen Websites (CMS-Freitextfeld mit eingefügter Tabelle) besonders häufig auftritt.

Welche Auswirkung hat das?#

Nutzer von Vorlese-Software können die Werte in Ihren Tabellen nicht einordnen — bei einer Preistabelle etwa nicht mehr zuordnen, welcher Preis zu welcher Leistung und welchem Zeitraum gehört. Gerade bei Tabellen mit vielen Zeilen und Spalten — Vergleichstabellen, Datenblätter, Kursübersichten — macht das den Inhalt für Screenreader-Nutzer faktisch unbrauchbar, obwohl die Information selbst vorhanden ist.

Wie beheben Sie fehlerhafte Tabellen-Zuordnungen?#

Nutzen Sie echte <th>-Elemente mit scope statt gestylter <td>-Zellen:

<!-- fehlerhaft: Kopfzeile ohne scope, evtl. sogar als <td> ausgezeichnet -->
<table>
  <tr>
    <td>Produkt</td>
    <td>Preis</td>
  </tr>
  <tr>
    <td>Bürostuhl</td>
    <td>249 €</td>
  </tr>
</table>

<!-- korrigiert: echte th-Kopfzellen mit scope -->
<table>
  <tr>
    <th scope="col">Produkt</th>
    <th scope="col">Preis</th>
  </tr>
  <tr>
    <th scope="row">Bürostuhl</th>
    <td>249 €</td>
  </tr>
</table>

Bei komplexeren Tabellen mit mehrstufigen Kopfzeilen zusätzlich das headers-Attribut nutzen, um Datenzellen explizit mit den passenden ids der Kopfzellen zu verknüpfen.

Konkretes Vorgehen:

1. CMS-Tabellen-Editor prüfen — die meisten Redaktionssysteme bieten eine Option „erste Zeile als Kopfzeile", die intern <th> statt <td> rendert.
2. scope="col" / scope="row" konsequent setzen — nicht nur <th> verwenden, sondern die Ausrichtung explizit angeben.
3. Nur gültige Werte verwenden — col, row, colgroup, rowgroup; keine anderen Strings.
4. Layout-Tabellen vermeiden — Tabellen ausschließlich für tatsächliche Daten nutzen, Layout über CSS lösen.
5. Bei sehr komplexen Tabellen das headers-Attribut für explizite Zell-zu-Kopf-Zuordnung erwägen.

Fazit#

Eine barrierefreie Tabelle unterscheidet sich vom sichtbaren Ergebnis oft kaum von einer gewöhnlichen Tabelle — der entscheidende Unterschied liegt im Markup: echte <th>-Elemente mit korrektem scope-Attribut statt rein visuell gestylter Zellen. Das lohnt sich besonders bei umfangreichen Vergleichs- und Datentabellen.