FigmaopenCode

Details

Synonyme: Arrow toggle, Collapse, Collapsible, Disclosure, Expandable, Expander, Accordion
Ähnliche Komponenten: Accordion, Tooltip, Help, Dropdown

Kurzbeschreibung

Die Details-Komponente blendet ergänzende Informationen ein, die nur für einen Teil der Nutzenden relevant sind.

Beispiele

Code anzeigen

<details class="kern-details">
<summary class="kern-details__header">
  <span class="kern-title kern-title--small">Wo finde ich meine Steuer-Identifikationsnummer?</span>
</summary>
<div class="kern-details__body">
  <p class="kern-body">
    Sie finden Ihre 11-stellige Steuer-Identifikationsnummer auf Ihrem letzten Einkommensteuerbescheid, auf Ihrer Lohnsteuerbescheinigung oder im Informationsschreiben des Bundeszentralamts für Steuern.
  </p>
</div>
</details>

Beschreibung

Die Details-Komponente besteht aus einem sichtbaren Bedienelement zum Öffnen und Schließen sowie einem ein- und ausklappbaren Inhaltsbereich. Das Bedienelement bleibt jederzeit sichtbar und beschreibt den Inhalt des aufklappbaren Bereichs. Der aufgeklappte Bereich kann Text, Listen, Links oder weitere Inhalte enthalten.

Verwendungsregeln

Verwende die Details-Komponente, um Seiten übersichtlicher zu gestalten, indem ergänzende Informationen nur bei Bedarf angezeigt werden.

Geeignete Inhalte sind beispielsweise:

• zusätzliche Erläuterungen
• Hilfetexte
• Hintergrundinformationen
• rechtliche Hinweise
• Definitionen oder Erklärungen einzelner Begriffe

Verwende Details für Informationen, die nur für einen Teil der Nutzenden relevant sind und nicht für das Verständnis oder den erfolgreichen Abschluss der aktuellen Aufgabe benötigt werden.

Die Zusammenfassung sollte kurz, verständlich und eindeutig formuliert sein, damit Nutzende sofort erkennen, welche Informationen sich dahinter verbergen.

Dos und Don’ts

Verwende die Details-Komponente ausschließlich für ergänzende Informationen, die nicht für das Verständnis oder den Abschluss einer Aufgabe erforderlich sind.

• Formuliere die Beschriftung des Bedienelements kurz, verständlich und eindeutig.
• Platziere die Details-Komponente in unmittelbarer Nähe des Inhalts, auf den sie sich bezieht.
• Verwende Details für einen einzelnen aufklappbaren Informationsbereich.
• Nutze stattdessen ein Accordion, wenn mehrere zusammengehörige Informationsbereiche unabhängig voneinander ein- und ausgeklappt werden sollen.
• Verstecke keine wichtigen Hinweise, Fehlermeldungen oder verpflichtenden Informationen innerhalb einer Details-Komponente.
• Verwende keine allgemeinen Beschriftungen wie „Mehr“ oder „Details“, wenn daraus nicht eindeutig hervorgeht, welche Informationen angezeigt werden.
• Platziere keine wesentlichen Eingabeelemente oder primären Aktionen ausschließlich innerhalb einer Details-Komponente.

Barrierefreiheit

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 1.3.1

Keine interaktiven Elemente im <summary> verschachteln

Implementierungsabhängig

WCAG 2.4.3

Logische Fokusreihenfolge beim Aufklappen

Implementierungsabhängig

WCAG 2.4.6

Kontextbeschreibende Beschriftung im <summary>

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.4.3

Ausreichender Kontrast für den Text im <summary>

Bestanden

WCAG 1.4.4

Kein Inhaltsverlust bei Textvergrößerung

Bestanden

WCAG 1.4.11

Ausreichender Kontrast für grafische Elemente (Aufklapp-Icon)

Bestanden

WCAG 2.1.1

Tastaturbedienung des <details>-Elements

Bestanden

WCAG 2.4.7

Sichtbarer Tastaturfokus am Bedienelement

Bestanden

WCAG 2.5.8

Ausreichende Klickfläche für das <summary>

Bestanden

WCAG 4.1.2

Nativer Zustand ohne zusätzliches ARIA oder JavaScript

Mitdiskutieren und beitragen

Hilf mit, die Komponente und Dokumentation zu verbessern, in dem du Fragen, Feedback oder Verbesserungsvorschläge im KERN Diskussion - Ticket auf openCode teilst.

Hast du eigene Lösungen, Beispiele oder Erweiterungen? Dann teile sie im KERN Katalog der Community.