Praxisleitfaden Kopfzellen in Tabellen
Tabellenwerte ihren Überschriften zuordnen
Machen Sie Zeilen- und Spaltenbezüge auch für Screenreader erkennbar.
td-has-headerWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-td-has-header.html
Befund verstehen
Eine Zahl braucht ihren Bezug
Der Laufzettel zeigt eine fiktive Seitenverteilung. Die schwarze erste Zeile sieht wie ein Tabellenkopf aus, besteht aber vollständig aus td-Elementen. Auch die Rubriknamen sind gewöhnliche Datenzellen.
Warum das relevant ist
Bei der Navigation von Zelle zu Zelle fehlt dadurch die programmatische Zuordnung: Die 12 steht für den Umfang des Passagenlabors. Ihre Position im sichtbaren Raster allein vermittelt diesen Bezug nicht an assistive Technik.
Scanner-Signal
td-has-header meldet an .plan-table Datenzellen ohne zugeordnete Kopfzellen.
- Regel
td-has-header- Referenz
- WCAG 1.3.1
Diagnose im HTML
Tabelle: .plan-table
Spaltenkopf „Umfang“: td
Zeilenkopf „Passagenlabor“: td
Datenzelle #passage-total: 12
Keine th-Kopfzellen vorhanden.Tabellenbezüge praktisch nachprüfen
Planen Sie die zellenweise Prüfung zusätzlich zum Strukturtest. Zahlen müssen mit den fachlich passenden Zeilen- und Spaltenköpfen verständlich bleiben.
Rechenbeispiel · Tabellen mit Kopfzuordnungen
- Annahme: eine überschaubare Datentabelle je Seite.
- Annahme: zehn Minuten je Seite für zellenweise Screenreader-Navigation und Kopfzuordnung.
- Komplexe Spannweiten, Umsetzung und andere Barrieren sind nicht eingerechnet.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Welche Überschriften erklären die Daten?
Bestimmen Sie zuerst, welche Bedeutung eine Zelle beim einzelnen Aufrufen haben muss.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Einfache Spalten | Eine Überschrift gilt für die Werte darunter, etwa „Start“, „Ende“ oder „Umfang“. | Verwenden Sie th scope="col" für diese Spaltenüberschrift. |
| Zusätzliche Zeilenbezüge | Die Rubrik erklärt, zu welchem Eintrag die Zahlen einer Zeile gehören. | Zeichnen Sie „Passagenlabor“ und die anderen Rubriknamen mit th scope="row" aus. So bleibt auch die Bedeutung innerhalb der Zeile verfügbar. |
| Mehrstufige oder unregelmäßige Tabellen | Ein Wert gehört zu mehreren Gruppen oder zu Köpfen außerhalb einer einfachen Zeilen- und Spaltenstruktur. | Vereinfachen Sie die Tabelle, wenn möglich. Andernfalls ordnen Sie die tatsächlich benötigten Kopfzellen gezielt über id und headers zu und prüfen die Ausgabe manuell. |
Fundstelle ansehen
Der vollständige Laufzettel im Befund
Die Aufnahme enthält die ganze Tabelle samt Beschriftung, Status, Heftskizze und Erläuterung. Die Markierung folgt der Tabelle, denn dort meldet Axe die fehlenden Kopfbezüge.
In der Zeile „Passagenlabor“ stehen 5 als Start, 16 als Ende und 12 als Umfang. Sichtbare Spaltennamen sind vorhanden; ihre Auszeichnung als Kopfzellen fehlt. Die Tabellenbeschriftung benennt lediglich die gesamte Übersicht.
Kopfzellen auszeichnen
Vorhandene Überschriften semantisch verbinden
Ersetzen Sie die vier Zellen der ersten Zeile durch th scope="col" und die Rubrikzellen durch th scope="row". Die Zahlen bleiben td. Der folgende Ausschnitt zeigt die betroffene Umfangszelle; dieselbe Auszeichnung gilt für alle entsprechenden Köpfe der Tabelle.
Im Tabelleneditor Aktivieren Sie Kopfzeile und Kopfspalte. Kontrollieren Sie anschließend im veröffentlichten HTML, ob echte th-Elemente entstehen. Passen Sie vorhandene td-Styles auch für th an, damit die Gestaltung erhalten bleibt.
Vorher
<tr>
<td>Rubrik</td>
<td>Start</td><td>Ende</td><td>Umfang</td>
</tr>
<tr>
<td>Passagenlabor</td>
<td>5</td><td>16</td>
<td id="passage-total">12</td>
</tr>Nachher
<tr>
<th scope="col">Rubrik</th>
<th scope="col">Start</th>
<th scope="col">Ende</th>
<th scope="col">Umfang</th>
</tr>
<tr>
<th scope="row">Passagenlabor</th>
<td>5</td><td>16</td>
<td id="passage-total">12</td>
</tr>Markierte Zeilen wurden geändert
Umsetzung absichern
Die Zuordnung durch die ganze Tabelle tragen
Korrigieren Sie das Tabellenmuster, damit jeder erzeugte Datensatz seine Bezüge erhält.
- 1
Verwenden Sie die vorhandenen Beschriftungen: Start, Ende und Umfang bezeichnen unterschiedliche Eigenschaften.
- 2
Behalten Sie die Rubriknamen als Zeilenköpfe bei; auch „Gesamtumfang“ erklärt die Werte seiner Zeile.
- 3
Lassen Sie die caption als Namen der gesamten Tabelle bestehen. Sie ergänzt die Kopfzellen.
- 4
Prüfen Sie nach Neuberechnung oder Datenwechsel, ob das Template die th-Elemente und ihre scope-Werte erhält.
Fehlversuche vermeiden
Was keine belastbare Kopfzuordnung ergibt
Nur fett oder dunkel gestalten
CSS erklärt die sichtbare Hierarchie. Es macht aus td keine Kopfzelle, auch wenn eine Zeile eindeutig wie eine Überschrift aussieht.
Nur thead ergänzen
Eine Zeilengruppe ersetzt keine Kopfzellen. Auch innerhalb von thead benötigen die Überschriften th.
Jede Zelle zu th machen
Die 12 ist ein Wert und keine Überschrift. Halten Sie Daten und Köpfe auseinander und setzen Sie scope nach ihrer tatsächlichen Richtung.
Eine Datentabelle als Layout markieren
role="presentation" würde die Tabellenstruktur unterdrücken. Der Laufzettel enthält echte Beziehungen zwischen Rubrik, Seitenzahlen und Umfang und braucht diese Struktur.
Die Zuordnung ist ergänzt, das Bild bleibt gleich
Axe meldet an derselben Tabelle nach der Korrektur einen Pass für td-has-header. Die unmarkierten Vorher- und Nachher-Aufnahmen sind pixelgleich; nachgewiesen ist die Änderung der HTML-Semantik.
Der Pass betrifft diese Regel an dieser Tabelle. Eine Screenreader-Prüfung oder vollständige WCAG-Prüfung der Seite wurde damit nicht ersetzt.
Nachgewiesene Korrektur
Spaltenkopf „Umfang“: th scope="col"
Zeilenkopf „Passagenlabor“: th scope="row"
Datenzelle #passage-total: weiterhin 12
Axe td-has-header: Pass an .plan-tablePrüfgrenzen kennen
Automatische Strukturprüfung und fachlicher Bezug
Ein vorhandener Kopfbezug muss zusätzlich die richtige Bedeutung vermitteln.
Automatisch prüfbar
- In den von der Regel erfassten größeren Datentabellen fehlende Kopfzuordnungen erkennen.
- Die betroffene Tabelle als Fundstelle zeigen.
- Nach der Reparatur dieselbe Regel am unveränderten Tabellenknoten erneut ausführen.
Im Kontext zu entscheiden
- Bewerten, ob die Überschriften die Werte fachlich richtig beschreiben.
- Bei komplexen Tabellen alle benötigten Zeilen-, Spalten- und Gruppenbezüge prüfen.
- Tabellennavigation mit assistiver Technik testen und auch kleinere Tabellen beurteilen, die diese Regel nicht erfasst.