Wissen / Inhalte aufteilen

Tabs oder Akkordeon: Website-Inhalte sinnvoll aufteilen

Kurz gesagt: Tabs und Akkordeons helfen nur, wenn die Aufteilung zur Leseaufgabe passt. Tabs zeigen in der Regel einen Bereich zugleich; Akkordeons können mehrere Abschnitte öffnen. Brauchen alle Besucher dieselbe Information oder müssen Inhalte verglichen werden, kann eine offene Darstellung besser passen. Prüfen Sie Auswahl, Beschriftung, Bedienung und Wiederfinden gemeinsam, bevor Inhalte verborgen werden.

Veröffentlicht am / Aktualisiert am / Redaktion: Ruhrstack / 8 Minuten Lesezeit

01 / LESEAUFGABE

Die Aufteilung folgt der Aufgabe, nicht dem Wunsch nach einer kürzeren Seite.

Weniger sichtbarer Inhalt bedeutet nicht automatisch weniger Aufwand.

Eine lange Leistungsseite kann Informationen enthalten, die nur einige Besucher benötigen. Sie kann aber auch einfach unklar gegliedert sein. Werden Absätze vorschnell hinter Reitern oder aufklappbaren Überschriften versteckt, wirkt die Seite zunächst kürzer. Die Leser müssen dann zusätzliche Entscheidungen treffen und möglicherweise Informationen suchen, die vorher direkt erreichbar waren.

Beschreiben Sie deshalb zuerst die Leseaufgabe: Soll jemand alle Schritte der Reihe nach verstehen, zwei Bedingungen vergleichen oder einen bekannten Abschnitt schnell wieder öffnen? Diese Unterschiede beeinflussen die geeignete Darstellung. Eine allgemeine Forderung nach „mehr Interaktion“ beantwortet sie nicht. Die Textstruktur darf vor der Auswahl des Bausteins überarbeitet werden.

Das GOV.UK Design System zu Akkordeons empfiehlt, den Nutzen gegenüber den Problemen verborgener Inhalte zu prüfen. Es nennt gut gegliederte offene Inhalte, mehrere Seiten oder Sprunglinks als mögliche Alternativen. Das sind nützliche Vergleichsmöglichkeiten, keine Verpflichtung, eine Unternehmenswebsite wie ein Verwaltungsangebot aufzubauen.

Sammeln Sie die Inhalte zunächst ohne den geplanten Effekt. Lassen sich Überschriften eindeutig benennen? Sind Abschnitte eigenständig verständlich? Benötigt ein Absatz unbedingt eine zuvor gelesene Definition? Erst dann lässt sich beurteilen, ob eine aufklappbare Darstellung unterstützt oder nur eine ungelöste redaktionelle Frage überdeckt.

02 / OFFENE INHALTE

Offene Abschnitte sind eine ernsthafte Gestaltungsoption.

Wichtige Informationen dürfen auffindbar bleiben, ohne zusätzlichen Klick zu verlangen.

Eine übersichtliche Seite kann auch mit mehr Inhalt ruhig wirken, wenn Überschriften, Absätze und Abstände die Struktur tragen. Ein kleines Inhaltsverzeichnis führt direkt zu relevanten Abschnitten. Besucher können nach unten lesen, quer vergleichen oder einen Begriff mit der Browserfunktion suchen. Dafür ist nicht grundsätzlich ein besonderer Inhaltsbaustein nötig.

Wenn alle Interessenten dieselben Voraussetzungen kennen müssen, gehören diese nicht beiläufig in einen unauffälligen Zusatzbereich. Denken Sie etwa an die klare Abgrenzung einer angebotenen Leistung. Eine Überschrift wie „Weitere Hinweise“ erklärt außerdem kaum, warum der Inhalt wichtig sein könnte. Die Platzierung und der Name müssen zur Bedeutung passen.

Offen bedeutet nicht, alles ungekürzt auf eine Seite zu legen. Unterschiedliche eigenständige Aufgaben können eigene Unterseiten rechtfertigen. Die Entscheidung über Seitenstruktur und passende Einstiege erklärt Website-Navigation planen. Hier wird innerhalb einer ausgewählten Seite geprüft, welche Information gleichzeitig sichtbar sein sollte.

Eine einfache Gegenprobe hilft: Nehmen Sie Tabs oder Akkordeon vorübergehend aus dem Entwurf und betrachten Sie denselben Inhalt mit klaren Überschriften. Löst das bereits die Orientierung, muss ein zusätzlicher Bedienmechanismus einen eigenen Nutzen zeigen. Ein Vergleich mit dieser ruhigen Variante ist aussagekräftiger als die Wahl zwischen zwei dekorativen Effekten.

03 / TABS

Tabs passen zu getrennten Bereichen mit schnellem Wechsel.

Der Vergleich mehrerer verdeckter Bereiche kann unnötiges Erinnern verlangen.

Die GOV.UK-Hinweise zu Tabs sehen einen möglichen Einsatz, wenn Inhalte in klar benannte verwandte Bereiche zerfallen und nicht gleichzeitig betrachtet werden müssen. Sie warnen vor einer Nutzung für schrittweises Lesen oder Vergleichen zwischen Bereichen. Ein Reiter ist keine allgemeine Lösung für jede umfangreiche Seite.

Ein fiktives internes Werkzeug kann beispielsweise getrennte Ansichten für heute, diese Woche und spätere Termine anbieten. Wer den bekannten Zeitraum wechselt, profitiert möglicherweise von einem gleichbleibenden Rahmen. Eine öffentliche Leistungsseite mit drei neuen Angebotsvarianten verlangt dagegen oft den direkten Vergleich. Dort kann das Verdecken wichtiger Merkmale stören.

Das W3C-Tabs-Muster beschreibt die Verbindung von Reitern, ausgewähltem Zustand und zugehörigem Inhalt sowie passende Tastaturinteraktionen. Eine optische Reihe unterstrichener Wörter erhält diese Eigenschaften nicht automatisch. Die technische Umsetzung muss den tatsächlichen Wechsel nachvollziehbar vermitteln.

Prüfen Sie außerdem den direkten Einstieg. Kann ein bestimmter Bereich geteilt oder nach einem Seitenwechsel wiedergefunden werden? Was passiert in einer schmalen Ansicht? Welche Beschriftungen bleiben vollständig lesbar? Wenn die Umsetzung auf dem Smartphone in eine andere Form wechselt, muss die Zuordnung der Inhalte trotzdem verständlich bleiben.

04 / AKKORDEON

Ein Akkordeon erlaubt Auswahl, kann aber Inhalte übersehbar machen.

Die Überschriften müssen erkennen lassen, was sich dahinter befindet.

Bei mehreren verwandten Zusatzthemen können Besucher gezielt den benötigten Bereich öffnen. Ob mehrere Abschnitte zugleich offen bleiben dürfen, ist eine bewusste Entscheidung. Soll jemand zwei Angaben vergleichen, kann das gleichzeitige Öffnen wesentlich sein. Wird immer der vorherige Abschnitt geschlossen, entsteht sonst ein ähnlicher Erinnerungsaufwand wie bei Tabs.

Das W3C-Akkordeonmuster beschreibt Überschriften mit zugehörigen Schaltern und Inhaltsbereichen. Dazu gehören erkennbare Zustände und Tastaturbedienung. Die konkrete Lösung kann dabei anders aussehen als ein fremdes Beispieldesign. Wichtig ist, dass Personen wissen, was geöffnet wird, und den Inhalt anschließend erreichen können.

Für einen einzelnen kurzen Zusatzhinweis kann das native HTML-Element details infrage kommen. Die MDN-Dokumentation zu details beschreibt das ausklappbare Element mit seiner Zusammenfassung. Auch eine native Grundlage braucht passende Texte, sichtbaren Fokus und Prüfung in den vorgesehenen Browsern. Sie ist kein automatischer Nachweis vollständiger Nutzbarkeit.

Vermeiden Sie unnötige Verschachtelungen. Ein Akkordeon im Akkordeon macht die sichtbare Struktur schwerer zu erfassen und verlangt weitere Entscheidungen. Falls lange Bereiche mehrere Ebenen besitzen, ist eine andere Gliederung möglicherweise geeigneter. Die Frage bleibt dieselbe: Welche Information möchte jemand finden, und wie gut ist ihr Ort vorher erkennbar?

05 / ENTSCHEIDUNGSHILFE

Drei fiktive Inhalte führen zu unterschiedlichen Lösungen.

Die eigene Matrix vergleicht die Aufgabe, nicht den dekorativen Stil.

Darstellung nach der konkreten Leseaufgabe wählen
Fiktiver InhaltLeseraufgabeZu prüfender Ansatz
Drei ServicevariantenVoraussetzungen direkt vergleichenOffene übersichtliche Gegenüberstellung
Ergänzende HinweiseEinen bekannten Sonderfall auswählenKlar benannter aufklappbarer Bereich
Vertrautes TerminwerkzeugZwischen abgegrenzten Zeiträumen wechselnTabs mit eindeutiger Auswahl und Bedienung

Alle Beispiele sind erfunden und keine geprüften Ruhrstack-Kundenfälle. Sie zeigen mögliche Ausgangspunkte. Eine bestimmte Inhaltsmenge erzwingt keinen bestimmten Baustein. Ergänzen Sie Ihre tatsächlichen Texte, die wichtigste Aufgabe und eine offene Variante zum Vergleich. Das Ergebnis wird an der Anwendung beurteilt.

Bei tabellarischen Daten sollte die Beziehung der Werte erhalten bleiben. Einzelne Spalten hinter Tabs aufzuteilen kann einen nötigen Vergleich erschweren. Der Artikel zu mobilen Datentabellen vertieft diese eigene Aufgabe. Ein Wechsel des Bausteins darf keine fachliche Zuordnung verlieren.

Fügen Sie der Entscheidung eine kurze Begründung hinzu: Was gewinnt die Person, was wird zusätzlich verborgen und welche Gegenprobe ist noch offen? Dieser Satz hilft bei späteren Ergänzungen. Neue Inhalte werden dann nicht nur deshalb in einen vorhandenen Reiter gesteckt, weil dort technisch noch Platz ist.

06 / PRÜFFÄLLE

Prüfen Sie Finden, Öffnen und Wiederfinden als Ablauf.

Ein funktionierender Klick allein bestätigt die gewählte Aufteilung nicht.

Geben Sie einer geeigneten Person eine konkrete Suchaufgabe, ohne die Überschrift bereits zu nennen. Findet sie den passenden Bereich? Erwartet sie dort den richtigen Inhalt? Wenn mehrere Bereiche infrage kommen, kann die Ursache in den Namen oder der inhaltlichen Abgrenzung liegen. Eine flüssigere Animation löst dieses Problem nicht.

Führen Sie anschließend die Bedienwege mit Tastatur und auf einem schmalen Bildschirm aus. Ist der Fokus sichtbar? Wird der geöffnete beziehungsweise ausgewählte Zustand verständlich vermittelt? Bleiben lange Beschriftungen lesbar? Nach dem Wechsel darf der wichtige Inhalt nicht unerwartet außerhalb des nachvollziehbaren Blickfelds liegen.

Prüfen Sie auch einen direkten Link, die Rückkehr aus einer anderen Seite und die Darstellung bei ausbleibendem Zusatzskript. Der passende Grundzustand hängt von der Umsetzung ab; die vorgesehenen Informationen müssen erreichbar bleiben. Solche Fälle werden konkret vereinbart und nicht durch das allgemeine Etikett „responsiv“ ersetzt.

Vergleichsaufgaben brauchen eine eigene Gegenprobe. Lassen Sie zwei Angaben tatsächlich nebeneinander oder nacheinander vergleichen. Muss sich die Person Werte merken, mehrfach umschalten oder scrollt sie an der gesuchten Stelle vorbei? Halten Sie Beobachtung und mögliche Ursache getrennt fest. Das Verfahren vertieft der Artikel zu Nutzertests.

07 / ZUSAMMENARBEIT

Inhalt und Baustein werden zusammen gestaltet.

Die passende Auswahl kann auch weniger Interaktion bedeuten.

Ruhrstack beschreibt auf der Design-Leistungsseite flexible Raster, wiederkehrende Elemente und die Prüfung mit passenden Inhalten. Eine solche Abstimmung kann klären, welche Informationen offen bleiben und wo ein gezielter Inhaltswechsel einen Nutzen bietet. Die technische Umsetzung und ihre Prüfung werden entsprechend vereinbart.

Bringen Sie den tatsächlichen Text und die wichtigsten Fragen Ihrer Besucher mit. Für die erste Einordnung reicht ein Ausschnitt. Persönliche Beratung hilft dabei, Inhalte fachlich zu trennen und die Wirkung des Bausteins daran zu beurteilen. Es muss nicht zuerst ein bestimmter Effekt bestellt werden, bevor die Aufgabe klar ist.

Ein nachvollziehbarer Entwurf zeigt die gewählte Struktur mit echten Überschriften und kritischen Textlängen. Die gemeinsame Prüfung hält fest, warum die Darstellung passt und welche Fälle sie noch bestehen muss. So bleibt die Gestaltung begründet, auch wenn später zusätzliche Informationen hinzukommen.

Das Ergebnis ist eine verständliche Lese- und Bedienentscheidung. Es verspricht keine bestimmte Suchposition oder besondere Darstellung in KI-Systemen. Für Ihre Besucher zählt, ob sie die wichtigen Informationen bemerken, richtig zuordnen und ohne vermeidbare Umwege wieder erreichen können.

08 / QUELLEN

Quellen und redaktioneller Stand.

Die Quellen wurden am 22. Oktober 2026 geprüft. Alle Primärquellen wurden am 22. Oktober 2026 geprüft. Entscheidungsmatrix und Beispiele sind eigene redaktionelle Arbeitshilfen. Fremde Designsysteme dienen der methodischen Einordnung; die passende Wahl und Umsetzung werden an den tatsächlichen Inhalten geprüft.

  1. GOV.UK Design System: Accordion: Nutzen, Grenzen und Alternativen für verborgene Inhaltsbereiche. Abgerufen am 22. Oktober 2026.
  2. GOV.UK Design System: Tabs: Eignung für getrennte Bereiche und Grenzen bei linearem Lesen oder direktem Vergleich. Abgerufen am 22. Oktober 2026.
  3. W3C APG: Tabs Pattern: Struktur, ausgewählter Zustand und Tastaturinteraktion. Abgerufen am 22. Oktober 2026.
  4. W3C APG: Accordion Pattern: Beziehung von Überschrift, Schalter und zugehörigem Inhaltsbereich. Abgerufen am 22. Oktober 2026.
  5. MDN: details: Natives ausklappbares HTML-Element mit Zusammenfassung. Abgerufen am 22. Oktober 2026.

Redaktioneller Hinweis: Dieser Beitrag dient der allgemeinen Information und ersetzt keine Einzelfallprüfung. Trotz sorgfältiger Recherche wird keine Gewähr für Vollständigkeit und fortdauernde Aktualität übernommen. Eine Haftung nach zwingenden gesetzlichen Vorschriften bleibt unberührt. Redaktionelle Einordnung.

Welche Inhalte sollen sichtbar bleiben?

Zeigen Sie uns einen längeren Seitenabschnitt und die wichtigste Leserfrage. Wir können Gliederung, passende Bausteine und erforderliche Bedienprüfungen gemeinsam einordnen.

Seitenstruktur besprechen