Version: 2.4.0

Summary

Synonyme: Zusammenfassung, Ergebnisliste
Ähnliche Komponenten: Task List, Description List

Kurzbeschreibung

Fasst alle Informationen zusammen, die Nutzende in vorigen Formularen eingegeben haben und die sie bei Bedarf bearbeiten können.

Beispiele

Einzeln

<div class="kern-summary">

<div class="kern-summary__header">
<span class="kern-number">1</span>
<h3 class="kern-title kern-title--small" id="title">
	Angaben zur Person
</h3>
</div>

<div class="kern-summary__body">
  <dl class="kern-description-list">
    <div class="kern-description-list-item">
      <dt class="kern-description-list-item__key">Name</dt>
      <dd class="kern-description-list-item__value">Musterperson</dd>
    </div>
    <div class="kern-description-list-item">
      <dt class="kern-description-list-item__key">Vorname</dt>
      <dd class="kern-description-list-item__value">Kim</dd>
    </div>
    <div class="kern-description-list-item">
      <dt class="kern-description-list-item__key">E-Mail</dt>
      <dd class="kern-description-list-item__value">kim@musterperson.de</dd>
    </div>
    <div class="kern-description-list-item">
      <dt class="kern-description-list-item__key">Adresse</dt>
      <dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
    </div>
  </dl>
      <div class="kern-summary__actions">
    <a href="#" class="kern-link" aria-describedby="title">
      <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
      Bearbeiten
    </a>
  </div>
</div>
</div>

Gruppe

<div class="kern-summary-group">
<div class="kern-summary-group__header">
  <h2 class="kern-heading-medium">Angaben zum Antragstellenden</h2>
</div>

<div class="kern-summary">
<div class="kern-summary__header">
	<span class="kern-number">1</span>
	<h3 class="kern-title kern-title--small">Angabe zur Person</h3>
</div>
<div class="kern-summary__body">
	<dl class="kern-description-list">
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Name</dt>
			<dd class="kern-description-list-item__value">Musterperson</dd>
		</div>
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Vorname</dt>
			<dd class="kern-description-list-item__value">Kim</dd>
		</div>
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">E-Mail</dt>
			<dd class="kern-description-list-item__value">kim@musterperson.de</dd>
		</div>
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Adresse</dt>
			<dd class="kern-description-list-item__value">Musterstraße 2, 23456 Musterstadt</dd>
		</div>
	</dl>
	<div class="kern-summary__actions">
		<a href="#" class="kern-link" aria-describedby="title">
			<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
			Bearbeiten
		</a>
	</div>
</div>
</div>

<div class="kern-summary">
<div class="kern-summary__header">
	<span class="kern-number">2</span>
	<h3 class="kern-title kern-title--small">Adresse Gebührenbescheid</h3>
</div>
<div class="kern-summary__body">
	<dl class="kern-description-list">
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Straße</dt>
			<dd class="kern-description-list-item__value">Nebengasse 3</dd>
		</div>
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Ort</dt>
			<dd class="kern-description-list-item__value">23456 Musterstadt</dd>
		</div>
	</dl>
	<div class="kern-summary__actions">
		<a href="#" class="kern-link" aria-describedby="title">
			<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
			Bearbeiten
		</a>
	</div>
</div>
</div>

<div class="kern-summary">
<div class="kern-summary__header">
	<span class="kern-number">3</span>
	<h3 class="kern-title kern-title--small">Name der Veranstaltung</h3>
</div>
<div class="kern-summary__body">
	<dl class="kern-description-list">
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Name</dt>
			<dd class="kern-description-list-item__value">Maskenball</dd>
		</div>
		<div class="kern-description-list-item">
			<dt class="kern-description-list-item__key">Beschreibung</dt>
			<dd class="kern-description-list-item__value">Der Maskenball findet zugunsten einer Spendenaktion statt.</dd>
		</div>
	</dl>
	<div class="kern-summary__actions">
		<a href="#" class="kern-link" aria-describedby="title">
			<span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
			Bearbeiten
		</a>
	</div>
</div>
</div>

<div class="kern-summary">
  <div class="kern-summary__header">
  <span class="kern-number">4</span>
    <h3 class="kern-title kern-title--small">Veranstaltungszeitraum</h3>
  </div>
  <div class="kern-summary__body">
    <dl class="kern-description-list">
      <div class="kern-description-list-item">
        <dt class="kern-description-list-item__key">Datum</dt>
        <dd class="kern-description-list-item__value">24.05.2025</dd>
      </div>
      <div class="kern-description-list-item">
        <dt class="kern-description-list-item__key">Uhrzeit</dt>
        <dd class="kern-description-list-item__value">18:00 Uhr</dd>
      </div>
    </dl>
        <div class="kern-summary__actions">
    <a href="#" class="kern-link" aria-describedby="title">
      <span class="kern-icon kern-icon--edit" aria-hidden="true"></span>
      Bearbeiten
    </a>
  </div>
  </div>
</div>
</div>

Beschreibung

Eine Summary besteht aus einer Überschrift, einer Description List und einem Link zur Bearbeitung. Mehrere Summaries bilden eine Summary-Gruppe. Wenn der Summary eine Task List vorangestellt war, geben die Summaries die Task Lists wieder.

Die Überschrift der Summary enthält die Beschreibung der vorangegangenen Aufgabe mit einer optionalen Nummerierung.

In der Description List werden die in vorigen Schritten gemachten Eingaben aufgelistet. Ein Eintrag der Description List besteht aus einem Begriff, also der Beschreibung der abgefragten Information, und der Beschreibung, also der tatsächlichen Eingabe der Nutzenden.

Verwendungsregeln

Setze die Summary oder Summary-Gruppen immer dann ein, wenn die Nutzenden im Vorfeld im Rahmen eines Online-Dienstes mit Hilfe einer Task List oder Task List-Gruppe mehrere Informationen eingegeben haben. Das gibt ihnen die Gelegenheit, in Ruhe alle Eingaben zu überprüfen, bevor sie weiter fortschreiten und z. B. die Eingaben versenden. Die vollständige Zusammenfassung ist nur dann zu erreichen, wenn alle Eingaben vollständig gemacht wurden.

In manchen Fällen kann es sinnvoll sein, nicht alle Informationen in der Summary zu zeigen. Das verhindert, dass Nutzende von zu vielen Informationen überlastet werden. Das gilt jedoch nur, wenn Nutzende nicht unbedingt alle Eingaben prüfen müssen, sondern Informationen als Übersicht angezeigt werden sollen. Dies kann z. B. der Fall sein, wenn in einem Vorgang mehrere kleinere Datensätze mit gleichem Aufbau angelegt und anschließend aufgelistet werden.

Beispiele:

Anlegen mehrerer Anzeigen in einem Vorgang
Anmeldung mehrerer Teilnehmer in einem Vorgang

Dos und Don’ts

Verwende für gleiche Aufgaben und Gruppen die gleichen Formulierungen wie in der zugehörigen Task List oder Task List-Gruppe.
Verberge keine wesentlichen Informationen, damit Nutzende wissen, wo sie welche Eingaben bei Bedarf ändern können.
Zeige die Informationen in der gleichen Reihenfolge, wie sie im Vorfeld eingegeben wurden.
Verwende keine anderen Buttons/Aktionen innerhalb der Summary.

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:

WCAG 3.3.2

Summary ist eindeutig beschriftet

Bestanden

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

WCAG 1.4.6

Text im Summary erfüllt das minimale Kontrastverhältnis von 7:1

WCAG 1.4.11

Summary hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab

WCAG 4.1.2

Links und Titel sind programmatisch verknüpft

Summary

Kurzbeschreibung

Beispiele

Einzeln

Gruppe

Beschreibung

Verwendungsregeln

Dos und Don’ts

Barrierefreiheit

Implementierungsabhängig

WCAG 3.3.2

Bestanden

WCAG 1.4.6

WCAG 1.4.11

WCAG 4.1.2

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Kurzbeschreibung​

Beispiele​

Einzeln​

Gruppe​

Beschreibung​

Verwendungsregeln​

Dos und Don’ts​

Barrierefreiheit​

Implementierungsabhängig

WCAG 3.3.2

Bestanden

WCAG 1.4.6

WCAG 1.4.11

WCAG 4.1.2

Inhaltsverzeichnis

KERN Chat (Beta 2.1)

Hallo!

Kurzbeschreibung

Beispiele

Einzeln

Gruppe

Beschreibung

Verwendungsregeln

Dos und Don’ts

Barrierefreiheit