Eine breite Tabelle lässt sich nicht beliebig zusammenschieben. Auf dem Smartphone musst du entscheiden, welche Beziehung erhalten bleiben soll: der direkte Vergleich zwischen Zeilen oder das Lesen eines vollständigen Datensatzes. Daraus ergibt sich, ob ein begrenzter Scrollbereich oder eine gestapelte Darstellung geeigneter ist.
Dieselben Inhalte in zwei Darstellungen
Das USWDS bietet mehrere Tabellenvarianten, darunter eine responsive gestapelte Tabelle. Die Varianten verdeutlichen unterschiedliche Möglichkeiten, dieselben Beziehungen auf engem Raum darzustellen. Für die Entscheidung zählt, welche Vergleichsaufgabe deine Besucher tatsächlich lösen müssen.
In der schmalen Darstellung werden Informationen eines Eintrags untereinander angeordnet. Das kann längere Beschreibungen lesbar halten. Gleichzeitig stehen Werte verschiedener Einträge nicht mehr unmittelbar in derselben Spalte. Eine mobile Darstellung ist deshalb eine Abwägung, keine kostenlose Verkleinerung.
Vergleich oder Einzelansicht?
Bei einer Tabelle mit längeren Textbeschreibungen kann die gestapelte Form gut zur Leseaufgabe passen. Bei einem Preisvergleich mit vielen Zahlen kann sie dagegen das Gegenüberstellen erschweren. Hier ist ein horizontal scrollbarer Bereich möglicherweise sinnvoller, sofern seine Bedienung und die Zuordnung der Spalten verständlich bleiben.
Verstecke nicht einfach die Hälfte der Spalten. Eine scheinbar entbehrliche Angabe kann die Bedingung erklären, unter der ein Preis gilt. Wenn du Inhalte reduzierst, muss es einen nachvollziehbaren Weg zu den vollständigen Informationen geben.
Beschriftungen dürfen nicht verschwinden
Wenn Zellen untereinander stehen, braucht jede Angabe weiterhin ihren Kontext. Prüfe, ob eine Zahl noch eindeutig als Preis, Menge oder Zeitraum erkennbar ist. Die sichtbare Umordnung muss mit der semantischen Tabellenstruktur vereinbar bleiben. Kopierter Text vor jeder Zelle ersetzt nicht automatisch die technischen Beziehungen.
Die W3C-Erläuterung zu Reflow berücksichtigt Inhalte, die für ihre Bedeutung eine zweidimensionale Anordnung benötigen. Diese Ausnahme ist keine Freigabe, die gesamte Seite horizontal überlaufen zu lassen. Ein geeigneter Tabellenbereich muss weiterhin gut benutzbar sein.
Teste eine konkrete Vergleichsfrage
Bitte jemanden, auf Desktop und Smartphone denselben Unterschied zwischen zwei Einträgen zu finden. Notiere, welche Spalten oder Beschriftungen er dabei benötigt. Wenn die mobile Version diese Information versteckt, ist sie für diese Aufgabe nicht gleichwertig.
Teste zusätzlich Tastaturfokus, Vergrößerung und den Rückweg nach einem geöffneten Detail. Eine abgeschnittene Tabelle kann optisch ruhig aussehen und trotzdem entscheidende Informationen verbergen.
Die mobile Aufgabe entscheidet über die Darstellung
Eine Person kann in einer Tabelle einen einzelnen Datensatz nachschlagen oder mehrere Datensätze vergleichen wollen. Für das Nachschlagen sind untereinander angeordnete Angaben oft gut überschaubar. Beim Vergleich kann dieselbe Umordnung jedoch lange Wege zwischen zusammengehörigen Werten erzeugen. Entscheide deshalb nicht allein anhand der verfügbaren Bildschirmbreite.
Schreibe vor der Umsetzung zwei oder drei typische Fragen auf. Muss beispielsweise der günstigere Tarif gefunden, eine bestimmte Eigenschaft geprüft oder ein einzelner Eintrag gelesen werden? Markiere, welche Spalten jeweils benötigt werden. Diese Zuordnung zeigt, welche Beziehungen die mobile Darstellung bewahren muss.
Gestapelte Daten brauchen wiederkehrende Beschriftungen
Wenn eine Tabellenzeile zu einem eigenen Block wird, fehlt die dauerhaft darüberstehende Spaltenüberschrift. Jeder Wert braucht dann weiterhin einen eindeutigen Kontext. Eine Zahl wie „24“ erklärt ohne Einheit nicht, ob sie einen Preis, eine Laufzeit oder eine Anzahl bezeichnet. Die sichtbare Beschriftung sollte zudem mit der zugänglichen technischen Struktur zusammenpassen.
Vermeide doppelte oder widersprüchliche Inhalte für assistive Technologien. Ein zusätzlich per Gestaltung eingefügtes Wort ist nicht automatisch ein Ersatz für korrekt zugeordnete Überschriften. Prüfe die gewählte Lösung mit echten Daten und den vorgesehenen Hilfsmitteln, statt nur eine leere Musterkomponente zu betrachten.
Seitliches Scrollen kann passend sein
Wenn die zweidimensionale Beziehung für den Vergleich notwendig ist, kann ein begrenzter horizontaler Scrollbereich sinnvoller sein als ein vollständiger Umbau. Es muss erkennbar sein, dass weitere Spalten erreichbar sind. Außerdem darf die ganze Seite dadurch nicht unkontrolliert breiter werden. Prüfe Fokus, Bedienbarkeit und den Zugriff auf die vollständigen Werte.
Teste den Wechsel zwischen Übersicht und Detail. Wer einen Datensatz öffnet und zurückkehrt, sollte seinen Ausgangspunkt wiederfinden können. Vergleiche anschließend dieselbe konkrete Aufgabe auf Desktop und Smartphone. Das Ziel ist nicht eine identische Anordnung, sondern ein nachvollziehbarer Zugang zu den Informationen, die für die Aufgabe benötigt werden.
Für Kriterien, Einheiten und Zahlenformatierung lies den Beitrag über vergleichbare Tabellen. Wenn es nur um die eigenen Angaben vor einer Absendung geht, ist eine Zusammenfassung häufig passender.
