FigmaOpenCode

Description List

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

Kurzbeschreibung

Strukturiert die Darstellung von Begriffen und deren Definitionen.

Beispiele

Default

Code anzeigen

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

Column

Code anzeigen

<dl class="kern-description-list kern-description-list--col">
<div class="kern-description-list-item">
  <dt class="kern-description-list-item__key">Bürgerämter</dt>
  <dd class="kern-description-list-item__value">Zuständig für Bürgerservices wie Anmeldungen, Ausweisangelegenheiten, Eheschließungen und Geburten oder Anträge für Veranstaltungen.</dd>
</div>
<div class="kern-description-list-item">
  <dt class="kern-description-list-item__key">Bezirksregierungen</dt>
  <dd class="kern-description-list-item__value">Wichtige Verwaltungseinheiten in einigen deutschen Bundesländern, die als Mittler zwischen der Landesregierung und den Kommunen fungieren. </dd>
</div>
<div class="kern-description-list-item">
  <dt class="kern-description-list-item__key">Bundesagentur für Arbeit</dt>
  <dd class="kern-description-list-item__value">Ist eine zentrale Institution auf dem deutschen Arbeitsmarkt mit vielfältigen Aufgaben und Dienstleistungen wie Arbeitsvermittlung und Arbeitslosenversicherung, Berufsberatung oder Aus- und Weiterbildung.</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

• "Bei Description-Lists mit viel Content können Begriffe und Definition direkt untereinander dargestellt werden.
• 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.