Tabellen

Kopfzellen brauchen Datenzellen

Regel: th-has-data-cells
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein <th> ohne zugehörige Datenzellen bedeutet meist, dass die Tabelle zum Layouten dient oder die Kopfzeile nicht zum Rumpf passt. In beiden Fällen entspricht die angesagte Struktur nicht dem, was zu sehen ist.

So beheben Sie es

Prüfen Sie, ob jede Kopfzelle tatsächlich Zellen in ihrer Spalte oder Zeile hat.
Nutzen Sie <td> für Zellen, die keine Kopfzellen sind.
Dient die Tabelle nur dem Layout, ersetzen Sie sie durch CSS Grid oder Flexbox.

Im Markup

Fehlerhaft

<table>
  <tr><th>Region</th><th>Revenue</th></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 th-has-data-cells (ö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.