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

Standard Summary

<div class="kern-summary">

<div class="kern-summary__header"> 
  <span class="kern-number"></span>
  <h3 class="kern-summary__title" id="title">Aufgabe</h3>
</div>

<div class="kern-summary__content">
  <dl class="kern-description-list">
    <div class="kern-description-list__row">
      <dt class="kern-description-list__key">Name</dt>
      <dd class="kern-description-list__value">Max</dd>
    </div>
    <div class="kern-description-list__row">
      <dt class="kern-description-list__key">Vorname</dt>
      <dd class="kern-description-list__value">Mustermann</dd>
    </div>
    <div class="kern-description-list__row">
      <dt class="kern-description-list__key">E-Mail</dt>
      <dd class="kern-description-list__value">dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy</dd>
    </div>
    <div class="kern-description-list__row">
      <dt class="kern-description-list__key">Sachkundigen vor Ort</dt>
      <dd class="kern-description-list__value">
        <ul>
          <li>Berger Ernst</li>
          <li>Müller, Hans</li>
          <li>Sagmeister, Petra</li>
          <li>Pan, Peter</li>
        </ul>
      </dd>
    </div>
  </dl>
  <div class="kern-summary__actions">
    <a href="#" class="kern-link" aria-describedby="title">
      <span class="kern-icon kern-icon--edit kern-icon--md" aria-hidden="true"></span>
      Bearbeiten
    </a>
  </div>
</div>
</div>

Group Summary

<div class="kern-summary-group">

<div class="kern-summary-group__header">
  <h2 class="kern-summary-group__title">Aufgabengruppe</h2>
</div>

<div class="kern-summary">
  <div class="kern-summary__header">
    <span class="kern-number"></span>
    <h3 class="kern-summary__title" id="title2">Aufgabe</h3>
  </div>
  <div class="kern-summary__content">
    <dl class="kern-description-list">
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Name</dt>
        <dd class="kern-description-list__value">Max</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Vorname</dt>
        <dd class="kern-description-list__value">Mustermann</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">E-Mail</dt>
        <dd class="kern-description-list__value">dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Sachkundigen vor Ort</dt>
        <dd class="kern-description-list__value">
          <ul>
            <li>Berger Ernst</li>
            <li>Müller, Hans</li>
            <li>Sagmeister, Petra</li>
            <li>Pan, Peter</li>
          </ul>
        </dd>
      </div>
    </dl>
    <div class="kern-summary__actions">
      <a href="#" class="kern-link" aria-describedby="title2">
        <span class="kern-icon kern-icon--edit kern-icon--md" aria-hidden="true"></span>
        Bearbeiten
      </a>
    </div>
  </div>
</div>

<div class="kern-summary">
  <div class="kern-summary__header">
    <span class="kern-number"></span>
    <h3 class="kern-summary__title" id="title3">Aufgabe</h3>
  </div>
  <div class="kern-summary__content">
    <dl class="kern-description-list">
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Name</dt>
        <dd class="kern-description-list__value">Max</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Vorname</dt>
        <dd class="kern-description-list__value">Mustermann</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">E-Mail</dt>
        <dd class="kern-description-list__value">dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Sachkundigen vor Ort</dt>
        <dd class="kern-description-list__value">
          <ul>
            <li>Berger Ernst</li>
            <li>Müller, Hans</li>
            <li>Sagmeister, Petra</li>
            <li>Pan, Peter</li>
          </ul>
        </dd>
      </div>
    </dl>
    <div class="kern-summary__actions">
      <a href="#" class="kern-link" aria-describedby="title3">
        <span class="kern-icon kern-icon--edit kern-icon--md" aria-hidden="true"></span>
        Bearbeiten
      </a>
    </div>
  </div>
</div>

<div class="kern-summary-group__header">
  <h2 class="kern-summary-group__title">Aufgabengruppe 2</h2>
</div>

<div class="kern-summary">
  <div class="kern-summary__header">
    <span class="kern-number"></span>
    <h3 class="kern-summary__title" id="title5">Aufgabe</h3>
  </div>
  <div class="kern-summary__content">
    <dl class="kern-description-list">
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Name</dt>
        <dd class="kern-description-list__value">Max</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Vorname</dt>
        <dd class="kern-description-list__value">Mustermann</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">E-Mail</dt>
        <dd class="kern-description-list__value">dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Sachkundigen vor Ort</dt>
        <dd class="kern-description-list__value">
          <ul>
            <li>Berger Ernst</li>
            <li>Müller, Hans</li>
            <li>Sagmeister, Petra</li>
            <li>Pan, Peter</li>
          </ul>
        </dd>
      </div>
    </dl>
    <div class="kern-summary__actions">
      <a href="#" class="kern-link" aria-describedby="title5">
        <span class="kern-icon kern-icon--edit kern-icon--md" aria-hidden="true"></span>
        Bearbeiten
      </a>
    </div>
  </div>
</div>

<div class="kern-summary">
  <div class="kern-summary__header">
    <span class="kern-number"></span>
    <h3 class="kern-summary__title" id="title6">Aufgabe</h3>
  </div>
  <div class="kern-summary__content">
    <dl class="kern-description-list">
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Name</dt>
        <dd class="kern-description-list__value">Max</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Vorname</dt>
        <dd class="kern-description-list__value">Mustermann</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">E-Mail</dt>
        <dd class="kern-description-list__value">dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy</dd>
      </div>
      <div class="kern-description-list__row">
        <dt class="kern-description-list__key">Sachkundigen vor Ort</dt>
        <dd class="kern-description-list__value">
          <ul>
            <li>Berger Ernst</li>
            <li>Müller, Hans</li>
            <li>Sagmeister, Petra</li>
            <li>Pan, Peter</li>
          </ul>
        </dd>
      </div>
    </dl>
    <div class="kern-summary__actions">
      <a href="#" class="kern-link" aria-describedby="title6">
        <span class="kern-icon kern-icon--edit kern-icon--md" aria-hidden="true"></span>
        Bearbeiten
      </a>
    </div>
  </div>
</div>

</div>

Beschreibung

Eine Summary besteht 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 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

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass die Informationen auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

Verwende das <dl>-Element, um die Liste zu erstellen, und die <dt>- und <dd>-Elemente, um die Begriffe und Beschreibungen darzustellen.
Stelle sicher, dass alle Begriffe und Beschreibungen klar und prägnant sind.
Verwende keine Sonderzeichen als Icons innerhalb der Begriffe oder Beschreibungen, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
Verwende das aria-describedby-Attribut, um zusätzliche Informationen mit den entsprechenden Begriffen oder Beschreibungen zu verknüpfen.

Summary

Kurzbeschreibung​

Beispiele​

Standard Summary​

Group Summary​

Beschreibung​

Verwendungsregeln​

Dos und Don’ts​

Barrierefreiheit​

Inhaltsverzeichnis