HTML-Kurs / Aufklappbare Inhalte mit details und summary erstellen

details und summary erstellen Inhalte, die Benutzer ein- und ausklappen können, ohne JavaScript zu schreiben. Sie eignen sich für optionale Erklärungen, längere Anleitungen oder Antworten, die die Leser bei Bedarf anzeigen möchten.

Ein einfaches aufklappbares Panel erstellen

<details>

  <summary>Öffnungszeiten anzeigen</summary>

  <p>Wir haben von Montag bis Freitag von 9:00 bis 18:00 Uhr geöffnet.</p>

</details>

Fügen Sie den Code in das body eines HTML-Dokuments ein und öffnen Sie es in einem Browser. Zunächst erscheint nur „Öffnungszeiten anzeigen“. Aktivieren Sie diesen Text mit Maus oder Touch oder der Tastatur, um den Absatz einzublenden; aktivieren Sie ihn erneut, um ihn zu schließen. Setzen Sie das summary zuerst in das details ein. Der Browser liefert den grundlegenden Aufklappzustand und die Interaktion; Sie benötigen kein Skript, nur um es zu öffnen und zu schließen.

Der Marker und die Ränder können je nach Browser oder nach CSS-Styling unterschiedlich aussehen. Wichtig ist, dass das Label klar bleibt, der Inhalt geöffnet und geschlossen werden kann und der Tastaturfokus sichtbar bleibt.

Inhalt zunächst anzeigen

Fügen Sie das Attribut open hinzu, wenn das Panel zu Beginn geöffnet angezeigt werden soll. Benutzer können es immer noch schließen und wieder öffnen. Die Regel der booleschen Präsenz wird ebenfalls mit checked in HTML-Syntax demonstriert.

<details open>

  <summary>Lieferinformationen</summary>

  <p>Die Lieferzeiten variieren je nach Gebiet.</p>

</details>

open ist ein boolesches Attribut. Das Schreiben von open="false" lässt das Attribut immer vorhanden und öffnet das Panel zu Beginn. Entfernen Sie das Attribut vollständig, um geschlossen zu starten. Verstecken Sie keine Bedingung, die jeder lesen muss, als wäre sie nur optionale zusätzliche Information.

Wählen Sie nützliche Bezeichnungen

Mehrere details-Elemente können zusammen erscheinen, aber jedes summary muss identifizieren, welchen Inhalt es einblendet. Das Wiederholen von „Mehr Informationen“ macht die Elemente schwer zu unterscheiden. Eine häufig gestellte Frage kann diesem Muster entsprechen, aber wenn ihre Antwort kurz und sofort nützlich ist, kann normal sichtbarer Text für die Leser schneller sein.

Testen Sie das Ergebnis mit einer Tastatur und auf einem schmalen Bildschirm. Die Referenz zu details auf MDN beschreibt dessen Struktur und Attribute.

Überprüfen Sie Tastaturbedienung und Anfangszustand

1. Öffnen Sie die Datei erneut und vergleichen Sie das geschlossene Beispiel ohne open mit dem geöffneten Beispiel mit open.
2. Drücken Sie die Tab-Taste, um zum summary-Element zu gelangen, und überprüfen Sie deren Fokusanzeige. Belassen Sie den Inhalt von summary für dieses grundlegende Beispiel bei einfachem Text, anstatt Links oder konkurrierende Schaltflächen darin zu platzieren.
3. Verwenden Sie Eingabetaste und Leertaste jeweils separat, um sie zu öffnen und zu schließen. Wenn Sie CSS hinzufügen, wiederholen Sie den Test, um sicherzustellen, dass der Fokus sichtbar bleibt.

HTML bietet den nativen Aufklappmechanismus, aber das Hinzufügen weiterer Interaktionen kann ein Fokusverhalten einführen, das noch getestet werden muss. Die Referenz zu summary auf MDN beschreibt dessen Einsatzbedingungen.

Wenn das nicht funktioniert

Überprüfen Sie, dass summary sich innerhalb von details befindet und dass die schließenden Tags vorhanden sind. Wenn Sie die Steuerung gestylt haben, stellen Sie sicher, dass der klickbare Bereich und der sichtbare Fokusindikator nicht entfernt wurden. Ein aufklappbares Panel zwingt die Benutzer zu einer zusätzlichen Handlung, daher ist es besser, es für wirklich optionale oder lange Inhalte zu reservieren, anstatt es nur für einen visuellen Effekt zu verwenden. Erweitern Sie die Überprüfung des Fokus und der Interaktion mit der kleinen Seite in Barrierefreiheitsgrundlagen: Überschriften, Links, Bilder und Tastatur.