FAQ mit details und summary: Kleine Antworten direkt in HTML

Eine bewährte HTML-Funktion

Für kurze ergänzende Antworten bietet HTML das Element „details“. Seine sichtbare Zusammenfassung steht in „summary“; der übrige Inhalt wird auf- und zugeklappt. Die aktuelle MDN-Dokumentation beschreibt außerdem die Gruppierung über ein gemeinsames „name“-Attribut, bei der jeweils ein Bereich geöffnet bleibt. Einzelne Merkmale können andere Browsergrenzen haben als das Grundelement.

Dieser Beitrag ist ein Fachratgeber zu vorhandener Webtechnik. Er meldet keine neue Einführung am 2. Oktober. Ein nativer Aufklappbereich kann zusätzliche Skripte sparen, nimmt dir aber die Entscheidung über sinnvolle Inhalte und verständliche Fragen nicht ab.

Fragen aus einer echten Aufgabe ableiten

Stell dir eine Seite für einen offenen Zeichenkurs vor. Drei nützliche Fragen wären: „Muss ich Material mitbringen?“, „Kann ich später dazukommen?“ und „Wie sage ich meine Anmeldung ab?“ Die Antworten stammen vom Kursteam. Solange die Materialfrage ungeklärt ist, gehört dort kein erfundener Hinweis auf kostenlose Ausstattung hinein.

Lass im Bauauftrag je Frage einen eigenen Aufklappbereich erstellen. Die Frage soll schon geschlossen aussagekräftig sein. Bezeichnungen wie „Mehr“ oder „Details“ sind für diese Aufgabe unnötig unbestimmt. Wichtige Informationen wie Termin und Ort bleiben im normalen Seiteninhalt sichtbar; Besucher sollten sie nicht erst zwischen Hilfefragen suchen müssen.

Gruppierung bewusst wählen

Wenn Antworten miteinander verglichen werden sollen, kann es sinnvoll sein, mehrere gleichzeitig offen zu lassen. Möchtest du auf einem kleinen Bildschirm Platz sparen, prüfe eine exklusive Gruppe. Diese Entscheidung ist eine Gestaltungsfrage und kein allgemeines Qualitätsmerkmal. Für unseren Kurs können Material und Ablauf gleichzeitig nützlich sein, daher beginnen wir ohne exklusive Gruppierung.

Teste den Bereich zuerst nur mit der Tastatur. Du solltest die Fragen erreichen, öffnen und wieder schließen können. Prüfe danach eine lange Antwort mit einem Link. Ist der Link erst erreichbar, wenn die Antwort geöffnet ist? Bleibt seine Beschriftung verständlich? Verändert ein langer Text die Seite so, dass die nächste Frage schwer zu finden ist?

Inhalt und Bedienung gemeinsam abnehmen

Öffne die Seite auf einer schmalen Ansicht und mit vergrößerter Schrift. Achte auf den Umbruch langer Fragen und einen erkennbaren offenen Zustand. Lass eine zweite Person eine konkrete Antwort suchen, ohne ihr die Position zu verraten. Wenn sie an der Formulierung scheitert, überarbeite die Frage zuerst. Zusätzliche Animationen lösen dieses Inhaltsproblem nicht. Die beste kleine FAQ beantwortet die tatsächlichen Rückfragen und bleibt im Alltag leicht zu bedienen.