Barrierefreiheit

Datentabelle ohne Kopfzellen

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Eine Tabelle mit mehreren Zeilen voller Datenzellen (kein role="presentation") enthält kein einziges <th>-Element — keine Zelle ist als Spalten- oder Zeilenüberschrift ausgezeichnet (WCAG 1.3.1).

Warum es zählt

Screenreader können eine Zelle keiner Überschrift zuordnen und lesen die Tabelle als unzusammenhängende Wertefolge. Die Beziehungen, die das Layout sehend vermittelt, gehen für alle verloren, die die Tabelle nicht sehen.

So behebst du es

  1. Zeichne die Kopfzeile beziehungsweise Kopfspalte mit <th scope="col"> beziehungsweise <th scope="row"> aus, damit jede Zelle mit ihrem Kontext angesagt wird.
  2. Dient die Tabelle nur dem Layout, ersetze sie durch CSS — Layout-Tabellen gehören gar nicht ins Markup.
  3. Binde Zellen bei unregelmäßigen Tabellen (verbundene Kopfzellen) über die Attribute id und headers ausdrücklich an ihre Überschriften.
  4. Prüfe nach dem Fix mit Screenreader oder axe: Beim Durchwandern muss zu jedem Wert seine Überschrift angesagt werden.

Zum Nachlesen