Prüfpunkt 1.3.1Stufe AÜberschriften, Tabellen und Reihenfolge
Wie wird eine Tabelle barrierefrei?
Eine Tabelle wird barrierefrei, wenn der Code sagt, welche Zelle Kopf und welche Inhalt ist. Kopfzellen stehen im Element th, Inhaltszellen in td. Hat die Tabelle Köpfe in der ersten Zeile und der ersten Spalte, nennt das Attribut scope die Richtung. Eine Beschriftung per caption sagt, worum es geht. Das Vorleseprogramm kann dann zu jeder Zelle den passenden Kopf mitsprechen.
Ein Vorleseprogramm spricht eine Zelle nach der anderen
Ein sehender Besucher sieht auf einen Blick, dass „Geschlossen“ zu Dienstag und zu 9 bis 11 Uhr gehört. Ein blinder Besucher hört eine Zelle nach der anderen. Das W3C beschreibt es an einer Tabelle mit Lieferzeiten: „Offen“ und „Geschlossen“ nützen erst, wenn sie einem Tag und einer Uhrzeit zugeordnet sind. Sind die Köpfe markiert, kann das Vorleseprogramm beim Wandern durch die Tabelle den Kopf ansagen, der sich gerade geändert hat. Sind alle Zellen td, bleibt der Kopf oft ungesagt. Eine fett formatierte erste Zeile ändert daran nichts: Laut W3C machen td-Zellen mit eigener Gestaltung eine Tabelle schlechter zugänglich.
Welche Tabelle welchen Code braucht
Das W3C unterscheidet nach dem Aufbau. Bei einer kleinen Tabelle mit Köpfen nur in der ersten Zeile, deren Spalten sich klar unterscheiden, genügt th. Stehen Köpfe in Zeile und Spalte, kommt scope dazu: scope="col" für die Spalte, scope="row" für die Zeile. Reicht ein Kopf über mehrere Spalten, nennt scope="colgroup" die Gruppe, und colgroup legt sie vorher fest. Ist die Tabelle so verschachtelt, dass ein Kopf nicht mehr gerade nach unten oder rechts wirkt, verknüpfen id und headers jede Zelle einzeln. An dieser Stelle rät das W3C, die Tabelle in mehrere einfache zu zerlegen. Das hilft jedem Leser und spart Arbeit.
Tabellen fürs Layout brauchen das Gegenteil
Manche ältere Website baut ihre Spalten mit Tabellen. WCAG 2 verbietet das nicht, das W3C empfiehlt dafür aber CSS, die Sprache für das Aussehen. Eine solche Tabelle bekommt kein th und kein caption, dafür role="presentation". Ihr Inhalt muss Zeile für Zeile gelesen Sinn ergeben, denn so spricht ihn das Vorleseprogramm: links oben beginnend, jede Zeile ganz, jede verschachtelte Tabelle sofort vollständig.
Seit 1999 verlangen die Richtlinien markierte Tabellenköpfe
Schon WCAG 1.0, die erste Fassung der Richtlinien des W3C, verlangte im Mai 1999 mit höchster Priorität, bei Datentabellen die Zeilen- und Spaltenköpfe zu kennzeichnen. Heute steht das in Kriterium 1.3.1. Von 948.225 Tabellen, die WebAIM 2026 auf einer Million Startseiten fand, hatten 19 Prozent eine gültige Auszeichnung als Datentabelle. Der Rest sind Tabellen fürs Layout oder Datentabellen ohne Kopfzellen; wie viele wovon, nennt der Bericht nicht. In der Befragung von 1.539 Nutzern von Vorleseprogrammen stehen komplexe Datentabellen an zehnter Stelle von zwölf Hürden.
Beispiele
Tabelle mit Köpfen in Zeile und Spalte
<table>
<tr><td></td><td>Montag</td><td>Dienstag</td></tr>
<tr><td>9 bis 11 Uhr</td><td>Offen</td><td>Geschlossen</td></tr>
</table><table>
<caption>Lieferzeiten</caption>
<tr><td></td><th scope="col">Montag</th><th scope="col">Dienstag</th></tr>
<tr><th scope="row">9 bis 11 Uhr</th><td>Offen</td><td>Geschlossen</td></tr>
</table>Das Vorleseprogramm kann zu „Geschlossen“ nun den Tag und die Uhrzeit nennen.
So gehen Sie es an
- Viele Redaktionssysteme bieten beim Anlegen einer Tabelle an, Kopfzellen festzulegen. Nutzen Sie das, dann entfällt die Arbeit am Code.
- Bitten Sie Ihre Agentur, jede Preis-, Tarif- und Terminliste auf th und scope durchzusehen.
- Geben Sie jeder Tabelle eine Beschriftung mit wenigen Wörtern, etwa „Lieferzeiten“.
Tipps aus der Praxis
- Beginnen Sie eine neue Tabelle, wenn das Thema wechselt. Eine zusätzliche Zeile mit th mitten in der Tabelle kann das Vorleseprogramm durcheinanderbringen.
- Jede Angabe bekommt ihre eigene Zelle. Mit br gebaute Pseudozeilen verrutschen, sobald jemand die Schrift vergrößert.
- Am Handy darf eine breite Tabelle seitlich scrollen. Das W3C setzt dafür overflow: scroll an ein umschließendes Element; overflow: hidden schneidet die Tabelle ab.
- Verändert sich die Tabelle auf kleinen Bildschirmen, prüfen Sie die Zuordnung noch einmal: Kopf und Zelle müssen auch in der schmalen Fassung verbunden bleiben.
Mehr zu diesem Thema
Weiter im Prüfbereich Barrierefreiheit
- Wie stelle ich meine Website auf barrierefrei um?Was WordPress, TYPO3, Drupal, Joomla, Shopify und Wix zur Barrierefreiheit zusagen und was Vorlage, Erweiterungen und Redaktion selbst leisten.
- Wie viele meiner Besucher erreicht meine Website nicht?Fast ein Viertel der Erwachsenen in der EU ist im Alltag eingeschränkt. Die Zahlen für Österreich, Deutschland und die EU und was sie für Ihre Website heißen.
- Warum muss die Reihenfolge der Inhalte im Code stimmen?Vorleseprogramme lesen eine Seite in der Code-Reihenfolge vor. Weicht sie von der sichtbaren Ordnung ab, kann der Inhalt seinen Sinn verlieren.
- Warum reichen Hinweise wie „der grüne Knopf rechts“ auf Websites nicht aus?Anweisungen dürfen sich nie allein auf Farbe, Form oder Position stützen. Blinde Besucher und Vorleseprogramme können ihnen sonst nicht folgen.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
