Tabellen, Karten und Videos: Elemente, die nicht ins Telefon passen

Manche Bausteine sind zwangsläufig breit: Datentabellen, Karten, eingebettete Videos. Sie dürfen die Seite trotzdem nicht verschiebbar machen. Die Lösung ist ein eigener scrollbarer Bereich um das Element — nicht das Aufweiten der ganzen Seite.

Was dazu geprüft wird

2 Prüfpunkte aus dem den erhobenen Signalen dieses Prüfbereichs — die Liste stammt aus dem Messkern, nicht aus diesem Text.

Elemente passen in den Anzeigebereich
Ob einzelne Bausteine — Tabellen, eingebettete Inhalte, Bilder — breiter sind als das Gerät.
Kein waagrechtes Scrollen
Ob Inhalte über die Bildschirmbreite hinausragen (WCAG 1.4.10). Der Bericht nennt die überstehende Pixelzahl und, wo eindeutig, das verursachende Element.

Jeder dieser Punkte steht mit Erklärung in der vollständigen Prüfpunktliste.

Worauf es in der Praxis ankommt

Ein Kasten, der nur das breite Element scrollen lässt, hält die Seite ruhig und erhält den Inhalt vollständig. WCAG nimmt solche Inhalte ausdrücklich von der Umfluss-Anforderung aus, wenn sie die Breite wirklich brauchen.

Ein solcher Bereich muss allerdings mit der Tastatur erreichbar sein, sonst kommt niemand ohne Maus an seinen rechten Teil. Diesen Befund haben wir zweimal an der eigenen Seite gefunden — einmal an einem Code-Block, einmal an einer Tabelle in der Datenschutzerklärung.

Bei eingebetteten Videos ist die verbreitete Lösung ein Rahmen mit festem Seitenverhältnis; ohne ihn bringt das Video seine eigene Breite mit.

Häufige Fragen

Darf eine Tabelle seitlich scrollen?

Ja, wenn sie die Breite wirklich braucht und der Scrollbereich auf die Tabelle begrenzt ist. Nicht in Ordnung ist, wenn dadurch die ganze Seite verschiebbar wird.

Was ist beim scrollbaren Bereich zu beachten?

Er muss den Tastaturfokus annehmen können und eine Beschriftung tragen. Sonst erreichen Menschen ohne Maus den rechten Teil nie — ein Verstoß gegen WCAG 2.1.1.

Weitere Themen aus Responsive

Website prüfen lassen Erst das Prüfverfahren verstehen →