Zum Hauptinhalt springen
FigmaOpenCode

Description List

Synonyme: Definitionsliste, Begriffsliste, Beschreibungsliste
Ähnliche Komponenten: Accordion

Kurzbeschreibung​

Strukturiert die Darstellung von Begriffen und deren Definitionen.

Beispiele​

Standard Description List​

Code anzeigen
<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>

Column Description List​

Bei Description-Lists mit viel Content können Begriffe und Definition direkt untereinander dargestellt werden.

Code anzeigen
<dl class="kern-description-list">
<div class="kern-description-list__col">
  <dt class="kern-description-list__key">Warum kann die Tätigkeit nur an einem Sonntag oder Feiertag durchgeführt werden</dt>
  <dd class="kern-description-list__value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla fringilla lobortis.</dd>
</div>
<div class="kern-description-list__col">
  <dt class="kern-description-list__key">Welche Tätigkeiten werden am Sonntag oder Feiertag durchgeführt</dt>
  <dd class="kern-description-list__value">Ut finibus felis consectetur ullamcorper consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</div>
<div class="kern-description-list__col">
  <dt class="kern-description-list__key">Welchen wirtschaftlichen Schaden entsteht, sollten die Arbeiten am gewünschten Sonn- oder Feiertag nicht stattfinden.</dt>
  <dd class="kern-description-list__value">Cras lacus purus, molestie et quam eget, condimentum finibus enim.</dd>
</div>
</dl>

Beschreibung​

Die Description List besteht aus einem Begriff (Term) und der Beschreibung zu diesem Begriff (Description). Sie sorgt für einen guten Überblick, sowie für eine klare, zugängliche Informationshierarchie. Sie listet beispielsweise Eingaben, die in einem Formular eingetragen wurden, übersichtlich auf. Auch für technische Spezifikationen oder im Rahmen eines Glossars kann die Description List gut eingesetzt werden. Der Begriff kann in einer Liste bei breiten Bildschirmgrößen entweder links von der Beschreibung stehen oder darüber. Mobil steht der Begriff immer über der Beschreibung.

Verwendungsregeln​

  • Verwende eine Description List, wenn du die Inhalte alle auf einen Blick präsentieren möchtest - ansonsten greife zum Accordion.
  • Halte den Begriff möglichst kurz und prägnant.
  • Wenn deine Description List doch überwiegend lange Begriffe beinhaltet, verwende die vertikal ausgerichtete Darstellungsvariante.
  • Achte darauf, Description Listen nicht zu breit anzulegen, da dies die Lesbarkeit und Benutzerfreundlichkeit beeinträchtigen kann.

Dos und Don’ts​

  • Verwende für reine Aufzählungen keine Description List
  • Überlade die Begriffe und Beschreibungen nicht mit zu vielen Inhalten

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass die Begriffe und Beschreibungen 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.

Inhaltsverzeichnis