Praxisleitfaden Tabellentitel und Semantik
Tabellentitel als caption auszeichnen
Ersetzen Sie die Titelzelle durch eine zugeordnete Tabellenbeschriftung.
table-fake-captionWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-table-fake-caption.html
Befund einordnen
Der Titel ist als Tabelleninhalt gespeichert
Scanner-Signal
table-fake-caption meldet die erste Tabelle in .wolfskeel-register: Ihre erste Zeile besteht aus einer Datenzelle mit colspan="4".
Technische Einordnung
- Regel
table-fake-caption- Referenz
- WCAG 1.3.1
„Urkundenfolge des Domkapitels“ benennt die gesamte Tabelle. Im HTML steht der Text jedoch in einer td-Zelle, die über alle vier Spalten reicht. Die sichtbare Titelwirkung ist damit nicht als Tabellenbeschriftung ausgezeichnet.
Bedeutung im Nutzungskontext
Bei der Navigation mit einem Screenreader fehlt die direkte Zuordnung des Titels zur Tabelle. Der Text kann als zusätzliche Datenzeile erscheinen, obwohl er weder Jahr noch Ereignis, Ort oder Beteiligte beschreibt.
Struktur vor der Korrektur
caption: nicht vorhanden
Erste Zeile: td mit colspan="4"
Text: Urkundenfolge des Domkapitels
Axe: table-fake-caption · VerstoßTabellentitel auf betroffenen Seiten prüfen
Eine verbundene Zelle kann Titel oder Spaltenkopf sein. Die Fundstellen lenken Ihre Prüfung auf die jeweilige Tabelle.
Illustratives Beispiel · Tabellentitel als Datenzellen
3 von 100 Seiten3 % mit diesem Befund im Beispiel
Ein Feld steht für eine Seite. Ein Kreuz markiert eine betroffene Seite.
Betroffene Seiten im Beispiel: 21, 58, 86.
97 Seiten sind unmarkiert. Das bedeutet nur: kein Befund dieser Regel im Beispiel. Es ist kein Nachweis vollständiger Barrierefreiheit.
Was bezeichnet die verbundene Zelle?
Entscheiden Sie anhand der Daten, welche Beziehung der Text ausdrückt.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Die gesamte Tabelle | Der Text fasst das Thema aller folgenden Zeilen zusammen, wie hier „Urkundenfolge des Domkapitels“. | Verwenden Sie caption als direktes Kind der Tabelle vor den Zeilengruppen. |
| Eine Gruppe von Spalten | Die Zelle benennt tatsächlich mehrere zusammengehörige Spalten innerhalb einer größeren Tabelle. | Modellieren Sie eine passende Kopfzelle und prüfen Sie die Zuordnung zu den Datenzellen. colspan allein beweist keinen falschen Titel. |
| Den umgebenden Abschnitt | Die Überschrift gehört zu mehreren Tabellen oder erklärt den gesamten Inhaltsbereich. | Belassen Sie die Abschnittsüberschrift außerhalb der Tabelle und beurteilen Sie deren eigene Beschriftung separat. |
Fundstelle ansehen
Die Urkundenfolge im Kanzleiregister
Der vollständige Registerabschnitt bleibt sichtbar. Markiert ist die obere Tabelle mit den Einträgen zu 1333, 1334 und 1335; die zweite Tabelle gehört zum unveränderten Umfeld.
Die erste Zeile „Urkundenfolge des Domkapitels“ steht über allen Daten. Ihr Text beschreibt die gesamte Aufstellung und muss deshalb als Tabellenbeschriftung erkennbar sein.
Titel zuordnen
Aus der Titelzeile wird caption
Verschieben Sie den vorhandenen Titel in caption und entfernen Sie seine bisherige tr-Zeile. Die Daten bleiben erhalten. Übertragen Sie bei Bedarf auch Hintergrund, Textfarbe und Abstände der bisherigen Titelzelle auf caption.
Im Tabelleneditor Nutzen Sie das Feld für die Tabellenbeschriftung. Entfernen Sie anschließend die zusammengeführte Titelzeile und kontrollieren Sie das veröffentlichte HTML: Das Feld muss tatsächlich ein caption-Element erzeugen.
Vorher
<table>
<tbody>
<tr>
<td colspan="4">Urkundenfolge des Domkapitels</td>
</tr>
<tr>
<td>1333</td><td>Wahl</td>
<td>Würzburg</td><td>Kapitel</td>
</tr>
<!-- weitere Datenzeilen -->
</tbody>
</table>Nachher
<table>
<caption>Urkundenfolge des Domkapitels</caption>
<tbody>
<tr>
<td>1333</td><td>Wahl</td>
<td>Würzburg</td><td>Kapitel</td>
</tr>
<!-- weitere Datenzeilen -->
</tbody>
</table>Markierte Zeilen wurden geändert
Umsetzung absichern
Titel und Daten getrennt behandeln
Ein sauberer Umbau erhält Inhalt, Lesbarkeit und die fachliche Tabellenstruktur.
- 1
Übernehmen Sie den vorhandenen Titel vollständig, ohne ihn zusätzlich als erste Datenzeile zu behalten.
- 2
Setzen Sie caption direkt in table, vor tbody oder thead. Eine Beschriftung innerhalb einer Zelle ist weiterhin Zellinhalt.
- 3
Passen Sie CSS-Regeln an, die bislang nur td oder th gestalten. Prüfen Sie insbesondere Textfarbe und Hintergrund.
- 4
Kontrollieren Sie separat, welche Spalten- und Zeilenüberschriften die Daten benötigen. Eine Beschriftung ersetzt keine Kopfzellen.
Fehlkorrekturen vermeiden
Was die Zuordnung noch nicht herstellt
Nur td durch th ersetzen
Eine Kopfzelle über alle Spalten macht aus einem Tabellentitel keine caption. Sie gibt dem Text eine andere Beziehung zu den Daten.
Die Titelzeile zusätzlich behalten
Mit caption und derselben verbundenen Zelle steht der Titel doppelt im Tabelleninhalt. Entfernen Sie die alte Titelzeile.
Nur Schrift und Rahmen ändern
Fettdruck, Zentrierung und colspan erzeugen eine visuelle Überschrift, aber keine Tabellenbeschriftung im HTML.
Jedes colspan entfernen
Verbundene Zellen können fachlich erforderlich sein. Prüfen Sie ihre Funktion, bevor Sie die Tabellenstruktur ändern.
Die Regel besteht an derselben Tabelle
Der erneute Axe-Lauf liefert für table-fake-caption an der ursprünglichen Tabelle ein Pass-Ergebnis. Der Titel steht jetzt in caption; die drei Datenzeilen bleiben erhalten.
Im Beispiel dokumentiert
Gelöst
Der Titel steht in caption statt in einer Datenzelle mit colspan. Die alte Titelzeile ist entfernt.
Was Sie zusätzlich beurteilen müssen
Bestätigt ist ausschließlich die Korrektur dieses Tabellentitels für table-fake-caption. Die Kalibrierseite enthält weitere, hier nicht behobene Barrieren.
Ein Strukturtest ersetzt keine TabellenprüfungPrüfauftrag für Ihre Umsetzung
- Im gerenderten HTML nachsehen: caption enthält „Urkundenfolge des Domkapitels“, die erste Datenzeile beginnt mit 1333.
- Die veröffentlichte Seite erneut auf table-fake-caption prüfen und die Fundstelle vergleichen.
- Die Tabelle mit einem Screenreader ansteuern und prüfen, ob der Titel bei der Tabellenorientierung sinnvoll ausgegeben wird.
- Darstellung und Tabellenkopf-Zuordnungen separat kontrollieren; insbesondere fehlen in diesem Beispiel weiterhin fachliche Spaltenüberschriften.
Struktur nach der Korrektur
caption: Urkundenfolge des Domkapitels
Erste Datenzeile: 1333 · Wahl · Würzburg · Kapitel
Datenzeilen: 3
Axe: table-fake-caption · Pass am selben ElementPrüfgrenzen kennen
Ein Strukturtest ersetzt keine Tabellenprüfung
Die Regel erkennt ein bestimmtes Muster einer nachgebildeten Tabellenbeschriftung.
Automatisch prüfbar
- Eine als Titel verwendete erste Tabellenzeile anhand ihrer Zellstruktur beanstanden.
- Die betroffene Tabelle im gerenderten Dokument lokalisieren.
- Nach dem Umbau denselben Regeltest am ursprünglichen Element wiederholen.
Im Kontext zu entscheiden
- Entscheiden, ob der Text die ganze Tabelle oder eine Gruppe von Daten beschreibt.
- Beurteilen, ob der Titel das Thema präzise und im Kontext verständlich benennt.
- Screenreader-Ausgabe, Kopfzellen-Zuordnung und Verständlichkeit der Daten prüfen.