Praxisleitfaden Tabellenbezüge mit headers
Tabellenzellen richtig verknüpfen
Erkennen und korrigieren Sie ungültige Verweise auf Tabellenüberschriften.
td-headers-attrWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-td-headers-attr.html
Befund verstehen
Die Überschrift ist sichtbar. Der Verweis führt ins Leere.
Im lokalen Freigabeprotokoll steht „6 Min.“ in der Spalte „Wende“. Das headers-Attribut dieser Zelle benennt jedoch keine vorhandene Kopfzelle. Die richtige Überschrift besitzt bereits die ID turn-head.
Warum das relevant ist
Wer die Tabelle mit einem Screenreader zellenweise liest, braucht die Verbindung zwischen Wert und Überschrift. Der ungültige Verweis liefert den Kontext „Wende“ nicht zuverlässig, obwohl die Spaltenanordnung ihn visuell nahelegt.
Scanner-Signal
td-headers-attr meldet die Tabelle .control-desk .dispatch-table. Die Zelle „6 Min.“ verweist auf missing-turn-head; diese ID existiert nicht.
- Regel
td-headers-attr- Referenz
- WCAG 1.3.1
ID-Beziehung vor der Korrektur
Lauf M-02 · Wert: 6 Min.
headers="missing-turn-head" → kein Element gefunden
Vorhandene Kopfzelle: th#turn-head → WendeTabellenexporte auf gültige Verweise prüfen
Ein veralteter Kopfbezeichner kann aus derselben Exportvorlage stammen. Prüfen Sie Ziel und Bedeutung der Verweise in jeder betroffenen Tabelle.
- Freigabeprotokoll× Befund im Beispiel
- Archivprotokoll× Befund im Beispiel
- Tabelle ohne ID-Verweise Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach erneutem Export, ob jeder betroffene headers-Verweis seine zutreffende Kopfzelle in derselben Tabelle erreicht.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Überschrift erklärt den Zellwert?
Prüfen Sie die Bedeutung des Wertes, bevor Sie einen Verweis ersetzen.
Die Lehrskizze zeigt den ID-Verweis der Zelle „6 Min.“, keine DOM-Verschachtelung. Die Kopfzelle „Wende“ ist bereits in derselben Tabelle vorhanden.
- missing-turn-headKein Element mit dieser ID
- Wendeth#turn-head · Kopfzelle derselben Tabelle
Passende Umsetzung auswählen
Fundstelle ansehen
„6 Min.“ gehört zur Spalte „Wende“
Der Beleg zeigt die vollständige Freigabetabelle mit Spaltenköpfen, beiden Datenzeilen und den zugehörigen Eingaben. Markiert ist die letzte Zelle des Laufs M-02.
Die Nachbarzelle „9 Min.“ verweist bereits korrekt auf turn-head. Nur „6 Min.“ trägt den ungültigen Verweis missing-turn-head. Der Screenshot zeigt die Position; die Diagnose benennt die unsichtbare HTML-Beziehung.
Verweis korrigieren
Die vorhandene Kopf-ID verwenden
Ersetzen Sie an der betroffenen Datenzelle missing-turn-head durch turn-head. Die Kopfzelle „Wende“, der Wert und die sichtbare Tabelle bleiben dabei unverändert.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
missing-turn-head- Kommt hinzu
turn-head
Im Tabellenbaustein Prüfen Sie die Vorlage oder den HTML-Export, der headers erzeugt. Überschrift und Datenzelle müssen dieselbe ID verwenden; eine Änderung allein im Browser bleibt nur ein Beispiel.
Vollständigen Code vergleichen
Vorher
<th id="turn-head">Wende</th>
<!-- Datenzelle im Lauf M-02 -->
<td headers="missing-turn-head">6 Min.</td>Nachher
<th id="turn-head">Wende</th>
<!-- Datenzelle im Lauf M-02 -->
<td headers="turn-head">6 Min.</td>Markierte Zeilen wurden geändert
Vorlage absichern
IDs und Verweise gemeinsam erzeugen
Eine konsistente Tabellenkomponente verhindert abweichende Kopf- und Zellbezüge.
- 1
Leiten Sie die ID der Kopfzelle und den headers-Wert aus derselben Zuordnung ab.
- 2
Halten Sie IDs im ganzen Dokument eindeutig, auch wenn mehrere Tabellen dieselbe Komponente nutzen.
- 3
Prüfen Sie jede einzelne ID in einem headers-Attribut: Sie muss auf eine zutreffende Kopfzelle derselben Tabelle zeigen.
- 4
Kontrollieren Sie nach Sortieren, Filtern und dem Hinzufügen neuer Zeilen erneut die gerenderte Zuordnung.
- 5
Bei einfachen Tabellen kann eine klare th-Struktur mit scope genügen. Entfernen Sie explizite Verweise erst, wenn die alternative Zuordnung geprüft ist.
Fehlversuche vermeiden
Ein vorhandenes Ziel ist noch kein richtiges Ziel
Auf irgendeine ID verweisen
vehicle-head existiert ebenfalls. Es bezeichnet aber „Fahrzeug“ und erklärt den Wert „6 Min.“ fachlich falsch.
Die Zelle mit sich selbst verbinden
Eine neue ID an der Datenzelle schafft keine zugehörige Überschrift. Der Verweis muss die Kopfzelle benennen.
IDs zwischen Tabellen teilen
Eine Überschrift in einer anderen Tabelle oder eine mehrfach vergebene ID liefert keine eindeutige Beziehung innerhalb dieser Tabelle.
Den Befund nur durch Löschen beseitigen
Das Entfernen von headers erklärt den Wert nicht automatisch. Prüfen Sie, ob die verbleibende Tabellenstruktur den erforderlichen Bezug tatsächlich vermittelt.
Der Verweis erreicht jetzt „Wende“
Nach der Änderung besteht dieselbe Tabelle die Regel td-headers-attr. Zusätzlich wurde geprüft, dass „6 Min.“ über turn-head auf die th-Zelle „Wende“ in derselben Tabelle verweist. Die unmarkierten Bildpixel sind identisch.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite und kontrollieren Sie headers="turn-head" an der Zelle des Laufs M-02.
- Führen Sie td-headers-attr erneut für die Tabelle aus und prüfen Sie, dass kein Verstoß oder unklarer Befund verbleibt.
- Navigieren Sie mit einem Screenreader zur Zelle „6 Min.“ und prüfen Sie, ob die zutreffende Überschrift „Wende“ verständlich ausgegeben wird.
Der automatische Nachweis gilt für diese Regel an der ausgewählten Tabelle. Die inhaltliche Richtigkeit aller Tabellenbezüge und die übrige Seite benötigen weitere Prüfung.
ID-Beziehung nach der Korrektur
Lauf M-02 · Wert: 6 Min.
headers="turn-head" → th#turn-head → Wende
Kopfzelle und Datenzelle: dieselbe Tabelle
td-headers-attr: bestandenPrüfgrenzen kennen
Technische Referenz und fachliche Bedeutung prüfen
Ein gültiger ID-Verweis ist messbar. Die richtige Überschrift braucht Kontext.
Automatisch prüfbar
- Ungültige headers-Referenzen in der untersuchten Tabelle erkennen.
- Die betroffene Tabelle und die fehlerhafte Verbindung zur Korrektur zuordnen.
- Nach der Änderung dieselbe Regel an derselben Tabelle erneut ausführen.
Im Kontext zu entscheiden
- Bewerten, ob die verknüpften Kopfzellen den jeweiligen Datenwert richtig und vollständig erklären.
- Tabellennavigation und tatsächliche Ausgabe mit einem Screenreader prüfen.
- Komplexe Zeilen- und Spaltengruppen sowie dynamisch erzeugte Tabellenzustände beurteilen.