Inhaltsverzeichnis-System (ToC)

Was macht Inhaltsverzeichnis-System (ToC)?

Zweck

Das Inhaltsverzeichnis-System (ToC) bietet eine Methodik zur Gestaltung von Navigationsmenüs innerhalb einer Seite, die die Struktur einer einzelnen Seite oder eines Dokuments widerspiegeln. Es löst das Problem der „Scroll-Ermüdung“ bei langen Inhalten, indem es eine ständige visuelle Karte der Seitenhierarchie bereitstellt, sodass Nutzer ihren aktuellen Kontext verstehen und ohne Positionsverlust sofort zu bestimmten Abschnitten springen können.

Anwendungsfälle

• Dokumentation & Technische Anleitungen: Navigation durch tiefe Hierarchien von Überschriften und Unterüberschriften.
• Lange Artikel & Blogbeiträge: Bereitstellung einer Roadmap für redaktionelle Inhalte mit über 2.000 Wörtern.
• Komplexe Landing Pages: Hilfe für Nutzer beim Springen zwischen den Abschnitten Funktionen, Preise und FAQ.
• Rechtliche & Richtlinienseiten: Navigation durch dichte Klauseln und nummerierte Abschnitte.
• Ressourcen-Hubs: Organisation langer Listen von Links oder Tools auf einer einzelnen Seite.

Wann NICHT zu verwenden

• Kurze Inhalte (<3 Abschnitte): Wenn die gesamte Seite in zwei Scrollvorgängen erfasst werden kann, fügt ein ToC unnötiges visuelles Rauschen hinzu.
• Primäre Site-Navigation: Verwenden Sie kein ToC für die Navigation zwischen verschiedenen Seiten; verwenden Sie stattdessen das „site-navigation-system“.
• Lineare Assistenten: Bei schrittweisen Prozessen, bei denen der Benutzer einer festen Reihenfolge folgen muss, verwenden Sie das „step-progress-system“.
• Minimalistisches Marketing: Wenn das Ziel ein einziger, ununterbrochener narrativer Fluss ohne Ablenkung ist.

Eingaben

1. Überschriftenhierarchie: Die Karte der <h2>- bis <h4>-Tags auf der Seite.
2. Layout-Kontext: Der verfügbare horizontale Raum (Sidebar vs. Inline).
3. Scroll-Container: Erfolgt der Scroll auf dem Body oder einem bestimmten überlaufenden Container?
4. Marken-Tokens: Abstände, Typografie und Farben für den „Aktiv“-Zustand aus dem Designsystem.

Ausgaben

1. ToC-Struktur-Spezifikation: Visuelle Definitionen für Listenelemente, Einrückungsebenen und die „Aktiv“-Anzeige.
2. Scroll-Spy-Blueprint: Logik, wie der „Aktiv“-Zustand aktualisiert wird, während der Benutzer scrollt.
3. Responsive Anpassungskarte: Wie das ToC von einer Desktop-Sidebar zu einem mobilen Hilfsmittel (z. B. Sticky Header oder Bottom Drawer) wird.
4. Wegweiser-Spezifikation: Definition von Smooth-Scroll-Verhalten und Fokusmanagement.

Arbeitsablauf

1. Dokumentenstruktur prüfen

Extrahieren Sie die Überschriftenstruktur. Ein sauberes ToC hängt von einer logischen h1 -> h2 -> h3-Progression ab.

• Primäre Ebene: In der Regel von <h2>-Tags abgeleitet.
• Sekundäre Ebene: Von <h3>-Tags abgeleitet (eingerückt).
• Tertiäre Ebene: Wird im ToC selten angezeigt, es sei denn, das Dokument ist außergewöhnlich dicht; erwägen Sie, diese standardmäßig zu kollabieren.

2. Layout-Muster auswählen

Wählen Sie eine räumliche Anordnung basierend auf dem Seitenlayout:

• Dauerhafte Sidebar (rechts/links): Am besten für breite Bildschirme (Desktop). Hält die Karte jederzeit sichtbar.
• Inline-Zusammenfassung: Platziert am Anfang des Artikels. Am besten für mobile oder mittellange Inhalte, bei denen „Klebrigkeit“ nicht erforderlich ist.
• Sticky Header / Floating Bar: Eine minimierte Version, die erst nach dem Scrollen am Hero-Bereich erscheint.

3. Visuelle Hierarchie festlegen (Ebenen)

Wenden Sie das visual-hierarchy-system an, um die Tiefe anzuzeigen:

• Einrückung: Verwenden Sie konsistente horizontale Abstände (z. B. --space-s pro Ebene), um Eltern-Kind-Beziehungen darzustellen.
• Typografie: Verwenden Sie eine kleinere Schriftgröße oder eine gedämpfte Farbe für Unterebenen (h3) im Vergleich zu Primärebene (h2).
• Indikatoren: Verwenden Sie eine vertikale „Fortschrittslinie“ links oder rechts der Liste, um die Elemente visuell zu verbinden.

4. Scroll-Spy (Aktiv)-Zustand entwerfen

Das ToC muss mit dem Viewport des Benutzers synchron bleiben:

• Der aktive Link: Heben Sie den Link hervor, der dem aktuell am oberen Viewport-Rand befindlichen Abschnitt entspricht.
• Der „Aktive Linie“-Effekt: Wenn Sie eine vertikale Linie verwenden, animieren Sie einen Marker, der an die Position des aktiven Elements gleitet.
• Rückmeldungsverzögerung: Stellen Sie sicher, dass der aktive Zustand schnell (<100ms) aktualisiert wird, aber einen kleinen Puffer enthält, um Flackern beim Scrollen zwischen Überschriften zu vermeiden.

5. Responsive Wegweisung planen

Sidebars verschwinden normalerweise auf Mobilgeräten; bieten Sie eine Alternative an:

• Der mobile ToC-Trigger: Ein klebriger Button (z. B. „In diesem Abschnitt“) oben oder unten auf dem Bildschirm, der einen Drawer öffnet.
• Die progressive Enthüllung: Zeigen Sie nur die aktuelle <h2> in einer klebrigen Leiste an, mit einem Chevron, um die vollständige Liste zu erweitern.

Entscheidungsregeln

• Die „Drei-Ebenen“-Grenze: Zeigen Sie niemals mehr als 3 Hierarchieebenen in einem ToC an. Wenn der Inhalt tiefer ist, vereinfachen Sie das ToC, um sich nur auf h2 und h3 zu konzentrieren.
• Einrückung vor Symbole: Verwenden Sie Einrückungen, um die Hierarchie darzustellen, anstatt Aufzählungspunkte oder Symbole, die die dichte Textliste überladen können.
• Eindeutigkeit des aktiven Zustands: Es sollte jeweils nur EIN Element im ToC „Aktiv“ sein.
• Sticky-Schwelle: Das ToC sollte nur dann klebrig (fixiert) werden, wenn es den oberen Rand des Viewports erreicht, nicht sofort beim Laden der Seite.
• Klicken zum Springen: Ein Klick auf einen ToC-Link muss „Smooth Scrolling“ verwenden, um Orientierungslosigkeit zu vermeiden, und MUSS den URL-Hash (#section-id) für die Teilbarkeit aktualisieren.

Einschränkungen

• Barrierefreiheit: Das ToC muss in ein <nav> mit aria-label="Inhaltsverzeichnis" eingewickelt sein. Der aktive Link muss aria-current="true" (oder aria-current="location") verwenden. Stellen Sie sicher, dass der Fokusring beim Durchtabben der Links sichtbar ist.
• Kontrast: Aktive und inaktive Zustände müssen die WCAG-AA-Anforderungen (4,5:1) erfüllen.
• Responsivität: Auf Mobilgeräten darf das ToC den Haupttext nicht überlappen; verwenden Sie einen Drawer oder einen umschaltbaren Bereich.
• Inhaltssynchronisation: Der Linktext im ToC sollte genau dem Überschriftentext entsprechen (oder eine klar erkennbare gekürzte Version sein).

Häufige Fehlermuster

• Der „Veraltete“ Zustand: Das ToC hebt den falschen Abschnitt hervor, weil der Scroll-Spy-Triggerpunkt zu hoch oder zu niedrig eingestellt ist.
• Der Inhaltsverdecker: Ein klebriges ToC, das den Text überlappt, den es dem Benutzer eigentlich lesen helfen soll.
• Tiefenüberladung: Anzeigen jedes einzelnen h4 und h5, wodurch das ToC länger als der Viewport wird und eine eigene Scrollleiste benötigt (verschachtelte Scrollleisten vermeiden).
• Fehlende IDs: Links, die nicht funktionieren, weil den Überschriften die entsprechenden id-Attribute fehlen.
• Kaputter Zurück-Button: Springen zu einem Abschnitt ohne Aktualisierung des URL-Hashs, wodurch Benutzer daran gehindert werden, die „Zurück“-Schaltfläche des Browsers zu verwenden, um zum ToC zurückzukehren.

Validierungskriterien

• Eine klare visuelle Hierarchie (Einrückung) besteht zwischen den Ebenen h2 und h3.
• Scroll-Spy hebt den aktiven Abschnitt beim Scrollen korrekt hervor.
• Ein Klick auf einen Link löst ein sanftes Scrollen zum richtigen Abschnitt aus.
• Der URL-Hash wird beim Klicken auf einen ToC-Link aktualisiert.
• Das ToC ist in einen <nav aria-label="Inhaltsverzeichnis">-Landmarkenbereich eingewickelt.
• Der aktive Zustand ist über aria-current zugänglich.
• Ein mobilspezifisches Wegweisungsmuster (z. B. Drawer oder Sticky Bar) ist definiert.
• Es werden nicht mehr als 3 Hierarchieebenen angezeigt.