Praxisleitfaden Tabellenköpfe und Daten
Tabellenköpfe ihren Daten zuordnen
Verwaiste Tabellenköpfe erkennen, die Datenstruktur klären und die Zuordnung nachprüfen.
th-has-data-cellsWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-th-has-data-cells.html
Prüfhinweis
Ein Tabellenkopf verspricht Daten, die fehlen
Das Importprotokoll der UML-Werkbank enthält die Überschriften „Merkmal“, „Typ“ und „Verwaister Kopf“. Darunter stehen nur sichtbar mit Boolean sowie Name mit String. Für den dritten Kopf gibt es in keiner Datenzeile eine Zelle.
Warum das relevant ist
Wer eine Tabelle mit einem Screenreader erkundet, benötigt nachvollziehbare Beziehungen zwischen Köpfen und Werten. Der zusätzliche Kopf lässt offen, ob Informationen fehlen oder die Tabelle falsch aufgebaut ist.
Scanner-Signal
th-has-data-cells meldet an .uml-importprotokoll table:first-of-type einen manuellen Prüfkandidaten: „Table data cells are missing or empty“.
- Regel
th-has-data-cells- Referenz
- WCAG 1.3.1
Zuordnung im vorhandenen HTML
Sichtbare Spalten: Merkmal → sichtbar, Name; Typ → Boolean, String
Verwaister Kopf → keine Datenzellen
Zusätzlich: sichtbar verweist mit headers="uml-fehlt" auf einen nicht vorhandenen Kopf.
Axe-Ergebnis: incomplete; manuelle Prüfung erforderlich.Tabellen mit der Quelle abgleichen
Ein Kopf ohne Daten verlangt eine fachliche Entscheidung. Planen Sie den Quellenvergleich und die anschließende Prüfung der verbleibenden Zuordnungen.
Rechenbeispiel · Tabellenköpfe ohne Daten
- Annahme: eine importierte Merkmalstabelle je Seite.
- Annahme: zwölf Minuten je Seite für Quellenabgleich und zellenweise Screenreader-Prüfung.
- Die Beschaffung fehlender Quelldaten und die Korrektur sind nicht eingerechnet.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Fehlt eine Spalte oder ist der Kopf überflüssig?
Vergleichen Sie die gerenderte Tabelle mit ihrer fachlichen Quelle, bevor Sie Zellen verändern.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Überflüssiger Kopf | Die Tabelle soll ausschließlich Merkmale und ihre Datentypen enthalten. | Entfernen Sie den dritten Kopf. Diesen Fall zeigt das Korrekturbeispiel; vorhandene Werte bleiben erhalten. |
| Fehlende Daten | Eine dritte Spalte ist fachlich vorgesehen, wurde beim Import aber nicht ausgegeben. | Reparieren Sie den Import anhand der Originaldaten. Ergänzen Sie keine erfundenen Werte, um den Prüfkandidaten verschwinden zu lassen. |
| Falsche Richtung | Daten sind vorhanden, der Kopf beschreibt jedoch die falsche Zeile oder Spalte. | Prüfen Sie scope sowie gegebenenfalls headers-Verweise und die Spannweiten verbundener Zellen gegen die gewünschte Zuordnung. |
Tabellenkontext
Das vollständige Importprotokoll im Ausschnitt
Die Aufnahmen zeigen denselben Importbereich mit Überschrift, Medienzeile und beiden Tabellen. Die Korrektur betrifft ausschließlich die erste Tabelle.
Der Rahmen umfasst die erste Tabelle vollständig. Unter „Verwaister Kopf“ stehen keine Daten; Boolean und String gehören zur Spalte „Typ“. Die zweite Tabelle und die Medienzeile dienen nur der Orientierung und sind kein Teil dieses Prüfergebnisses.
Korrekturbeispiel
Den unbenutzten Kopf entfernen
Für die gezeigte Variante mit zwei Datenspalten entfällt „Verwaister Kopf“. Die verbleibenden Köpfe erhalten scope="col". Zusätzlich wird der bereits fehlerhafte headers-Verweis von sichtbar auf den vorhandenen Kopf uml-name berichtigt. Merkmale und Datentypen bleiben unverändert.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Vor dem Entfernen Bestätigen Sie fachlich, dass keine dritte Datenspalte benötigt wird. Ist der Import unvollständig, muss die Quelle korrigiert werden; das Löschen des Kopfes würde den Datenverlust sonst verdecken.
KorrekturvergleichHTML der Merkmalstabelle Vorher
<table> <tr><th id="uml-name">Merkmal</th> <th id="uml-typ">Typ</th> <th>Verwaister Kopf</th></tr> <tr><td headers="uml-fehlt">sichtbar</td> <td>Boolean</td></tr> <tr><td>Name</td><td>String</td></tr> </table>Nachher
<table> <tr><th id="uml-name" scope="col">Merkmal</th> <th id="uml-typ" scope="col">Typ</th></tr> <tr><td headers="uml-name">sichtbar</td> <td>Boolean</td></tr> <tr><td>Name</td><td>String</td></tr> </table>Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie das geänderte Element im Nutzungskontext manuell. Der Code allein bestätigt das Ergebnis nicht.
Umsetzung
Köpfe und Werte gemeinsam ausgeben
Die Korrektur muss im Tabellen-Template oder Import ankommen, damit sie beim nächsten Laden bestehen bleibt.
- 1
Leiten Sie Kopfzeile und Datenzeilen aus derselben freigegebenen Spaltendefinition ab.
- 2
Prüfen Sie ausgeblendete und optionale Spalten in jedem unterstützten Tabellenzustand.
- 3
Kontrollieren Sie bei dieser Tabelle: Merkmal steht über sichtbar und Name, Typ über Boolean und String; der explizite headers-Verweis zeigt auf uml-name.
- 4
Prüfen Sie bei verbundenen Zellen zusätzlich colspan, rowspan und die resultierenden Beziehungen.
Fehlkorrekturen
Eine leere Spalte ist keine belastbare Reparatur
Platzhalter statt Daten einfügen
Ein beliebiger Strich oder eine erfundene Zahl erklärt nicht, was die dritte Spalte bedeuten soll. Klären Sie fehlende Daten mit der fachlichen Quelle.
Nur scope ergänzen
scope="col" benennt eine Richtung. Unter dem verwaisten Kopf entstehen dadurch keine Datenzellen.
Alle Köpfe zu td machen
Damit geht die vorhandene Kopfsemantik für Merkmal und Typ verloren. Korrigieren Sie gezielt die fehlerhafte Struktur.
Die Spalte nur optisch verstecken
Eine rein visuelle Anpassung kann die fehlerhafte Beziehung für assistive Technik bestehen lassen. Kontrollieren Sie das gerenderte HTML und die zugängliche Tabelle.
Die Struktur ist korrigiert; die Bedeutung bleibt zu prüfen
Die Browserprüfung bestätigt zwei Köpfe mit scope="col", den korrigierten headers-Verweis und die unveränderten Daten. Axe führt die ausgewählte Tabelle für th-has-data-cells danach unter passes. Das bleibt ein Korrekturbeispiel: Die fachliche Vollständigkeit und die Screenreader-Ausgabe wurden damit nicht bestätigt.
Im Beispiel dokumentiert
Korrekturbeispiel · Manuell nachprüfen
Merkmal und Typ erhalten scope="col"; sichtbar verweist auf uml-name. Die vier Datenwerte bleiben erhalten.
Was Sie zusätzlich beurteilen müssen
Die gezeigte Prüfung betrifft th-has-data-cells an dieser Tabelle. Sie belegt weder die Barrierefreiheit des gesamten Imports noch die Erfüllung aller Anforderungen aus WCAG 1.3.1.
Was der Scan erkennt und was Sie beurteilenPrüfauftrag für Ihre Umsetzung
- Mit der Originalquelle bestätigen, dass die Merkmalstabelle nur Merkmale und Datentypen enthalten soll.
- Mit der Tabellensteuerung eines Screenreaders jede Datenzelle besuchen und die zugehörige Spaltenüberschrift prüfen.
- Bei Boolean und String die Zuordnung zu Typ, bei sichtbar und Name die Zuordnung zu Merkmal nachvollziehen.
- Nach erneutem Import und einem Seitenwechsel prüfen, dass der überflüssige Kopf nicht wieder erscheint.
Beobachteter Zustand nach der Änderung
Merkmal → sichtbar, Name
Typ → Boolean, String
sichtbar: headers="uml-name" verweist auf Merkmal.
Dritter Tabellenkopf entfernt; Daten unverändert.
Redaktioneller Status: Korrekturbeispiel, manuelle Prüfung offen.Prüfumfang
Was der Scan erkennt und was Sie beurteilen
Ein Strukturhinweis macht die Fundstelle sichtbar. Ob die Tabelle fachlich vollständig ist, ergibt sich aus ihrem Inhalt.
Automatisch prüfbar
- Tabellen mit potenziell fehlenden Datenzuordnungen als Prüfkandidaten erfassen.
- Die betroffene Tabelle und den technischen Regelhinweis zuordnen.
- Nach einer Änderung dieselbe Tabellenstruktur erneut analysieren.
Im Kontext zu entscheiden
- Entscheiden, ob ein Kopf überflüssig ist oder Inhalte fehlen.
- Die Bedeutung aller Kopf-Daten-Beziehungen mit der fachlichen Quelle abgleichen.
- Die tatsächliche Ausgabe und Navigation mit assistiver Technik kontrollieren.