Barrierefreie Tabellen: Preislisten, Kurspläne und Vergleiche richtig auszeichnen

Wann eine Tabelle die richtige Wahl ist

Tabellen sind für tabellarische Daten gedacht: Preislisten, Stundenpläne, Vergleiche. Sie sind NICHT für Layouts gedacht. Wenn du eine Tabelle für das Seitenlayout nutzt, ist das ein Barrierefreiheits-Problem weil Screenreader sie als Datentabelle interpretieren.

Korrektes Tabellen-Markup

Nutze th-Elemente für Spalten- und Zeilenüberschriften. Setze scope='col' oder scope='row' auf die th-Elemente. Füge eine caption hinzu die den Tabelleninhalt beschreibt.

Bei komplexen Tabellen: headers und id nutzen um Zellen ihren Überschriften zuzuordnen.

Responsive Tabellen ohne Barrierefreiheits-Verlust

Tabellen auf Mobilgeräten sind problematisch. Lösungen: Horizontales Scrollen erlauben (overflow-x: auto). Oder: Tabelle in eine Kartendarstellung umwandeln per CSS.

Wichtig: Die semantische Struktur (th, td) muss erhalten bleiben, auch wenn die Darstellung sich ändert.

Häufig gestellte Fragen