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

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 3.3.2

Begriffe und Beschreibungen sind eindeutig zuordenbar

Bestanden

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

Bestanden

WCAG 1.3.1

Description Lists sind programmatisch korrekt strukturiert

Bestanden

WCAG 1.4.1

Listeneigenschaften werden nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Text in der Description List erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Description List hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab

Bestanden

WCAG 2.1.1

Description List ist vollständig per Tastatur navigierbar

Bestanden

WCAG 2.4.3

Die Navigationsreihenfolge in der Liste ist logisch und intuitiv

Bestanden

WCAG 2.4.13

Fokussierbare Elemente haben einen sichtbaren Fokuszustand