Du möchtest eine Werkbank planen und bekommst eine Seite über Platz, Werkzeug und Material. Eigentlich willst du zuerst wissen, womit du anfangen sollst. Eine reine Überschriftenliste sagt zu wenig; alle Absätze auf einmal verlangen zu viel Aufmerksamkeit. Wie kann ein Abschnitt schon beim Überfliegen helfen und trotzdem Raum für Nachfragen lassen?
Schreibe pro Abschnitt eine eigenständig verständliche Kernaussage und ergänze darunter eine konkrete Frage, die zusätzliche Absätze öffnet. Die Kernaussage bleibt beim Aufklappen erhalten; die Vertiefung liefert Begründung, Beispiel oder Vorgehen. So lässt sich die Lesetiefe für jeden Gedanken einzeln wählen. Voraussetzungen und entscheidende Einschränkungen müssen bereits sichtbar sein, damit die kurze Fassung keine falsche Entscheidung nahelegt.
Die kurze Fassung muss eine brauchbare Antwort geben; die Vertiefung erklärt, wie diese Antwort zustande kommt.
Eine Kernaussage, eine beantwortbare Frage
Die Komponente ExplainableSection hat drei Bestandteile: eine sichtbare Zusammenfassung, eine beschriftete Öffnungsfläche und den ergänzenden Inhalt. Der Browser verwaltet den offenen Zustand über die HTML-Elemente details und summary. Es wird kein Text nachgeladen oder generiert. Mehrere Abschnitte dürfen gleichzeitig offen bleiben, damit Leser Informationen zusammen betrachten können.
Dieses lässt sich auf einen ganzen Gedanken anwenden. Die redaktionelle Arbeit liegt darin, eine nützliche erste Ebene zu schreiben. Eine Überschrift wie „Platzbedarf“ benennt nur das Thema; eine Aussage wie „Plane Stellfläche und Arbeitsraum getrennt“ gibt bereits eine Handlung vor.
Plane bei einer Werkbank Stellfläche und Arbeitsraum getrennt ein; ohne Raum zum Arbeiten ist auch eine passende Tischplatte keine brauchbare Lösung.
Wie unterscheiden sich Stellfläche und Arbeitsraum?
Die Stellfläche beschreibt den belegten Boden. Zum Arbeitsraum gehören zusätzlich die Bereiche, in denen du stehst, Werkstücke bewegst und Werkzeug erreichst.
Markiere den geplanten Standort am Boden und spiele typische Arbeitsschritte durch. Ob der Platz reicht, hängt von deinen Werkstücken und Tätigkeiten ab; aus der Tischgröße allein lässt sich das nicht ableiten.
Die Frage kündigt an, was der zusätzliche Text beantwortet. Sie spart Lesern die Vermutung, was sich hinter einem allgemeinen „Mehr“ verbirgt. Beim Schließen bleibt die Kernaussage als Orientierung stehen. Für einzelne Fachwörter bleibt dagegen Explainable Text passend: Begriffserklärung und Abschnittsvertiefung erfüllen unterschiedliche Aufgaben.
Wann Aufklappen hilft
Ein Akkordeon steuert, welcher Inhalt sichtbar ist. Ob der Text dadurch leichter verständlich wird, hängt von seiner Gliederung und der ersten Ebene ab. Die Nielsen Norman Group beschreibt sowohl die bessere Übersicht als auch die zusätzlichen Klicks und die Gefahr, relevante Informationen zu übersehen. Wenn Leser voraussichtlich alle Abschnitte brauchen, kann offener Fließtext die passendere Wahl sein.
Nicky Cases Nutshell zeigt einen bestehenden Ansatz für einbettbare, auch verschachtelte Abschnittserklärungen. Für einen kleinen statischen Baustein reicht hier eine Ebene: Autorinnen und Autoren legen Kurzfassung und Vertiefung ausdrücklich fest. Tiefe Verschachtelungen verlagern die Orientierungsarbeit sonst wieder auf die Lesenden.
Eine kurze Fassung darf Voraussetzungen, Risiken oder Gegenargumente nicht so auslassen, dass sich ihre Aussage beim Öffnen ins Gegenteil verkehrt. Das lässt sich redaktionell prüfen, aber nicht durch eine Zeichenbegrenzung garantieren.
Einen eigenen Abschnitt formulieren
Der Konfigurator braucht nur deinen Browser. Er nimmt Klartext entgegen und erzeugt daraus eine Vorschau sowie ein kopierbares HTML-Fragment. Die Beispieltexte sind redaktionell formuliert und keine Bauanleitung oder gemessene Empfehlung. Eingaben werden im aktuellen Tab gehalten und beim Neuladen verworfen.
Formuliere zuerst die sichtbare Kernaussage um. Ergänze dann eine Frage, die deine zusätzlichen Absätze tatsächlich beantworten. Übernimm die Eingaben in die Vorschau und prüfe den Abschnitt einmal geschlossen und einmal geöffnet. Leerzeilen im Detailtext werden zu getrennten Absätzen.
Beispiel geladen; deine Texte bleiben in diesem Browser-Tab.
Lesevorschau
Plane bei einer Werkbank Stellfläche und Arbeitsraum getrennt ein; ohne Raum zum Arbeiten ist auch eine passende Tischplatte keine brauchbare Lösung.
Wie unterscheiden sich Stellfläche und Arbeitsraum?
Die Stellfläche beschreibt, welchen Teil des Bodens die Werkbank belegt. Der Arbeitsraum umfasst zusätzlich die Bereiche, in denen du stehst, Werkstücke bewegst und Werkzeug erreichst.
Markiere den geplanten Standort am Boden und spiele deine typischen Arbeitsschritte durch. Ob der Platz reicht, hängt von deinen Werkstücken und Tätigkeiten ab; aus der Tischgröße allein lässt sich das nicht ableiten.
Statisches HTML übernehmen
1<div class="explainable-section">2 <p>Plane bei einer Werkbank Stellfläche und Arbeitsraum getrennt ein; ohne Raum zum Arbeiten ist auch eine passende Tischplatte keine brauchbare Lösung.</p>3 <details>4 <summary>Wie unterscheiden sich Stellfläche und Arbeitsraum?</summary>5 <p>Die Stellfläche beschreibt, welchen Teil des Bodens die Werkbank belegt. Der Arbeitsraum umfasst zusätzlich die Bereiche, in denen du stehst, Werkstücke bewegst und Werkzeug erreichst.</p>6 <p>Markiere den geplanten Standort am Boden und spiele deine typischen Arbeitsschritte durch. Ob der Platz reicht, hängt von deinen Werkstücken und Tätigkeiten ab; aus der Tischgröße allein lässt sich das nicht ableiten.</p>7 </details>8</div>Die Vorschau prüft das Aufklappen und die Darstellung deiner Texte. Sie bewertet weder Verständlichkeit noch Vollständigkeit. Vorschau und Export ändern sich erst beim Übernehmen; noch nicht übernommene Eingaben werden als solche gekennzeichnet. Der HTML-Export behandelt Eingaben als Text und maskiert HTML-Sonderzeichen. Er enthält native Browser-Steuerelemente; das Erscheinungsbild passt du mit dem Stylesheet deiner Website an.
Im eigenen Design-System verwenden
Die wiederverwendbare React-Komponente braucht React, TypeScript und lucide-react; ihr Erscheinungsbild verwendet die Tailwind-Klassen dieses Projekts. In diesem Repository lässt sie sich wie im folgenden Beispiel importieren. In einem anderen Projekt übernimmst du zusätzlich die Komponentendatei und ersetzt den Alias durch deinen Importpfad. Der Konfigurator liefert alternativ frameworkfreies HTML.
React-Beispiel mit zwei erklärenden Absätzen
1import { ExplainableSection } from "@/components/ExplainableSection";2
3export function WorkspaceAdvice() {4 return (5 <ExplainableSection6 summary="Plane Stellfläche und Arbeitsraum getrennt; die Tischgröße allein beantwortet die Platzfrage nicht."7 question="Was muss ich vor dem Aufbau prüfen?"8 >9 <p>10 Markiere den Standort und prüfe typische Wege mit deinen11 Werkstücken, einschließlich des Zugangs zum Werkzeug.12 </p>13 <p>14 Halte offene Platzfragen fest, bevor du Maße oder Material15 auswählst; der Abschnitt ersetzt keine konkrete Aufbauplanung.16 </p>17 </ExplainableSection>18 );19}Die Komponente benötigt für das Öffnen keine Hydrierung, also kein nachträgliches Aktivieren durch React im Browser. Zusammenfassung und Detailtext stehen schon im HTML. Die Textmenge bleibt deshalb auch bei geschlossenem Zustand Teil des Dokuments: Das Muster reduziert die sichtbare Menge, aber weder die übertragenen Bytes noch automatisch die Arbeit beim Rendern. Für sehr große Inhalte passen eigene, verlinkbare Artikel besser.
Beim Öffnen wächst der Abschnitt bewusst. Vermeide eine automatische Öffnung nach dem Laden oder eine Zeichenanimation für bereits vorhandene Absätze. Für Browser-Suche, Drucken und die Bedienung mit assistiver Technik prüfst du die tatsächlich unterstützten Browser; geschlossener Inhalt ist nicht in jeder Ausgabe gleich zugänglich. Die Accessibility-Karte vertieft die allgemeinen Prüfungen.
Vier Prüfungen vor dem Einsatz
- Lies ausschließlich die geschlossene Fassung: Handlung, Voraussetzung und entscheidende Grenze bleiben verständlich.
- Öffne die Frage mit der Tastatur: Der Fokus ist sichtbar, und beide Zustände sind bedienbar.
- Öffne zwei Abschnitte nacheinander: Beide bleiben geöffnet, wenn du ihre Aussagen vergleichen möchtest.
- Prüfe HTML und Markdown-Export: Kurzfassung, Frage und sämtliche ergänzenden Absätze bleiben erhalten.
Quellen und nächste Schritte
- Nielsen Norman Group: Accordions on Desktop – Einsatzbedingungen, Sichtbarkeit und Interaktionskosten.
- Nicky Case: Nutshell und Dokumentation – einbettbare Abschnittserklärungen, Rekursion und bewusst begrenzter Funktionsumfang.
- MDN: details – natives Öffnen,
summary, Gruppierung und Browser-Unterstützung. - Explainable Text für Worterklärungen und Accessibility für die Prüfung deiner Oberfläche.