Zusammenfassung zeigen Zusammenfassung verbergen
Ein interaktives Inhaltsverzeichnis — häufig als aufklappbares Akkordeon umgesetzt — ist mehr als ein Design-Gimmick: richtig gebaut erhöht es die Lesbarkeit, verbessert die Zugänglichkeit und beeinflusst, wie Inhalte in Google Discover oder Google News wahrgenommen werden. Gerade für Nachrichten- und Magazinseiten lohnt es sich, das kleine Modul technisch und redaktionell sauber zu gestalten.
Viele Redaktionen setzen inzwischen auf kompakte Navigationselemente, doch hinter dem klickbaren Button verbergen sich entscheidende Details: Semantik, Fokussteuerung und visuelle Stabilität bestimmen, ob das Feature Nutzer bindet oder irritiert — und ob Suchmaschinen die Struktur fehlerfrei interpretieren.
Warum dieses Thema jetzt relevant ist
Ultraschall-Zahnreiniger aus Sachsen soll häusliche Mundpflege revolutionieren
Arzneimittelregeln von 2009: veraltete Vorgaben verursachen Engpässe und höhere Preise
Suchmaschinen und Empfehlungs-Dienste gewichten Lesersignale und Nutzerfreundlichkeit stärker als früher. Ein gut implementiertes Inhaltsverzeichnis kann die Verweildauer erhöhen und die Artikelstruktur für automatische Systeme klarer machen. Gleichzeitig führen unsaubere Akkordeons leicht zu schlechter Zugänglichkeit oder zu Layout-Verschiebungen, die das Nutzererlebnis schmälern.
Technische Prinzipien für ein sauberes Akkordeon
Bei der Umsetzung sollten Redaktionen drei Bereiche in den Mittelpunkt stellen: semantische Struktur, Barrierefreiheit und Performance.
Semantik heißt: Das Inhaltsverzeichnis muss als Navigation erkennbar sein. Verwenden Sie semantische Elemente (zum Beispiel <nav> oder geordnete Listen) statt reiner Div-Strukturen. Für die Barrierefreiheit sind ARIA-Attribute wichtig — aber sie ersetzen keine korrekte HTML-Struktur.
Performance-Aspekte betreffen vor allem Layout-Stabilität. Vermeiden Sie Content-Shift beim Aufklappen: Das verhindert negative Effekte auf die Wahrnehmung und auf die Werte der Core Web Vitals, insbesondere CLS.
Praktische Kontrollliste (schnell anwendbar)
- Nutzen Sie eine semantische Navigation (
<nav>+<ol>/<ul>) statt reiner Container. - Arbeiten Sie mit aria-expanded und aria-controls für aufklappbare Bereiche; stellen Sie sicher, dass Zustandsänderungen für Screenreader erkennbar sind.
- Sorgen Sie für sichtbare Tastatur-Fokuspfade und ermöglichen Sie das Auf- und Zuklappen mit der Enter- sowie der Leertaste.
- Reservieren Sie beim Aufklappen genug Platz um Layout-Verschiebungen zu vermeiden (statische Platzhalter oder CSS-Animationen ohne Reflow).
- Verwenden Sie fragment-Links (Anker) zu Kapitelabschnitten; diese erleichtern das Teilen und unterstützen Robots beim Indexieren.
- Testen Sie auf verschiedenen Geräten — besonders auf Mobiltelefonen — und mit Screenreadern.
Konkrete Umsetzungstipps
Nicht jede Redaktion braucht das gleiche Design: Ein kurzes Feature-Stück profitiert von einer kompakten Liste, ein längerer Report eher von einem persistierenden Inhaltsverzeichnis, das beim Scrollen sichtbar bleibt.
Technisch empfehlenswert ist eine Kombination aus serverseitig gerenderten Ankern und minimalem JavaScript zur Zustandssteuerung. So bleibt die Struktur auch bei deaktiviertem JS erhalten — ein Plus für Crawling und Accessibility.
Vergleich: Gute vs. problematische Akkordeons
| Aspekt | Gute Umsetzung | Problematische Umsetzung |
|---|---|---|
| Semantik | <nav> mit Liste und Ankerlinks | Nur <div> ohne Struktur |
| Barrierefreiheit | ARIA-Zustände, Tastatursteuerung | Keine ARIA, kein Tastaturfokus |
| Layout | Stabile Flows, CSS-Animation ohne Reflow | Sprunghafter Content-Shift beim Öffnen |
| Indexierbarkeit | Serverseitig sichtbare Anker, klare Überschriften | Inhalt nur per JS nachladbar |
Redaktionelle Feinheiten
Das Inhaltsverzeichnis ist zugleich ein redaktionelles Werkzeug: Formulieren Sie Überschriften knapp und eindeutig. Suchmaschinen und Leser profitieren, wenn Kapitelüberschriften klar sagen, worum es geht — statt mit blassen Allgemeinheiten zu arbeiten.
Bei Aktualisierungen: Passen Sie das Inhaltsverzeichnis an statt nur neue Abschnitte anzuhängen. Ein gepflegtes Verzeichnis signalisiert Sorgfalt und hilft Lesern, relevante Passagen schnell zu finden.
Was das für Discover und News bedeutet
Ein sauber aufgebautes Inhaltsverzeichnis fördert die Nutzererfahrung und kann dadurch indirekt die Chancen auf Sichtbarkeit in Google Discover und in News-Feeds erhöhen. Entscheidend sind aber nicht einzelne Widgets, sondern das Zusammenspiel von Inhaltsqualität, technischer Stabilität und Nutzersignalen.
Redaktionen sollten also kleinere lokale Optimierungen (wie das Akkordeon) nicht isoliert betrachten, sondern als Teil einer holistischen Publikationsstrategie.
Kurz: Ein gut gestaltetes Inhaltsverzeichnis zahlt sich aus — für Leser, für Barrierefreiheit und für die Auffindbarkeit. Wer die technischen Basics beachtet und die redaktionelle Pflege nicht vernachlässigt, schafft einen echten Mehrwert.
