Tabellen

Datenzellen brauchen Kopfzellen

Regel: td-has-header
Schweregrad: Kritisch
WCAG-Stufe A

Warum das wichtig ist

In einer Tabelle größer als drei mal drei ist eine einzeln gelesene Zelle eine Zahl ohne Bedeutung. Erst Kopfzellen erlauben die Ansage „Umsatz, Berlin, 1,2 Mio.“, wenn der Fokus auf der Zelle landet.

So beheben Sie es

Geben Sie der Tabelle eine Kopfzeile oder -spalte mit <th>.
Ergänzen Sie scope="col" oder scope="row", damit die Richtung eindeutig ist.
Verknüpfen Sie Zellen bei unregelmäßigen Tabellen explizit über headers und id.

Im Markup

Fehlerhaft

<table>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

Korrekt

<table>
  <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.3.1 Info und Beziehungen (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu td-has-header (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.