Wie das Description List Element die Accessibility und Entwickler-Erfahrung verbessert

Listen zählen zu den grundlegenden Bausteinen des Webs. Jede:r Web-Entwickler:in kennt die HTML-Elemente <ul> und <ol> für ungeordnete und geordnete Listen. Doch wenige kennen ihren nahen Verwandten <dl>, die Beschreibungsliste.

Ein typischer Anwendungsfall ist die Implementierung eines Glossars mit Begriffen und Definitionen. Tatsächlich kann man aber noch viel mehr damit machen. Jede Liste von Schlüssel-Wert-Paaren kann als Beschreibungsliste gestaltet werden. Es verbessert die DX, also Entwickler-Erfahrung, indem es den Code besser lesbar macht. Und es verbessert die Barrierefreiheit eurer Web-Inhalte.

Zwei Personen besprechen den HTML-Code auf dem Laptop-Monitor vor ihnen. Foto: © Ketut Subiyanto / pexels.com

Wir werfen einen Blick auf die Geschichte des Elements, wie es funktioniert und wie es sich auf die Barrierefreiheit auswirkt.

Eine kurze Geschichte des Beschreibungsliste-Elements

Das <dl>-Element gibt es seit HTML+ im Jahr 1993. Das Dokument definierte das Element noch als „Definitionsliste“:

A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term flush-left and the definition, formatted paragraph style, indented after the term.

Diese enge Definition ist auch heute noch in vielen Köpfen präsent. Aber sie gilt nicht mehr. Die Definition des Elements wurde in HTML5 geändert, wodurch es vielseitiger wurde:

The dl element represents an association list consisting of zero or more name-value groups (a description list). [...] Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

Das bedeutet, dass das Element zur Kennzeichnung einer beliebigen Liste von Schlüssel-Wert-Paaren verwendet werden kann. Zum Beispiel eine Liste von Metadaten über einen Kunden: Name, Adresse, Telefonnummer usw.

Wie ihr das <dl>-Element verwendet

Die Beschreibungsliste umfasst eine Liste an Begriffen und Beschreibungen, die mit den HTML-Elementen <dt> und <dd> definiert werden. Hier ein Beispiel einer Liste an Metadaten:

<dl> <dt>Account Owner</dt> <dd>Martina Musterfrau</dd> <dt>Banking Institute</dt> <dd>Musterbank</dd> <dt>IBAN</dt> <dd>AT12 3456 7891 2345 6789</dd> <dt>Telephone</dt> <dd>+43 1234 56 78</dd> </dl>

Die semantischen HTML-Tags vermitteln wichtige Informationen an assistive Technologien. Screenreader können in der Liste navigieren und die Beziehung zwischen Begriff und Beschreibung vermitteln. Aber auch Web-Entwickler:innen profitieren von dem semantischen Markup. Stellt euch vor, das Beispiel oben würde als Abfolge von <div>-Elementen implementiert:

<div class="metadata"> <div class="term">Account Owner</div> <div class="description">Martina Musterfrau</div> <div class="term">Banking Institute</div> <div class="description">Musterbank</div> <div class="term">IBAN</div> <div class="description">AT12 3456 7891 2345 6789</div> <div class="term">Telephone</div> <div class="description">+43 1234 56 78</div> </div>

Ich hoffe, ihr stimmt mir zu: Semantisches HTML ist eindeutig leichter zu verstehen und ihr könnt damit besser arbeiten. Ihr könnt die semantischen Tag-Namen auch für aussagekräftige und leicht verständliche CSS-Selektoren nutzen. Lest meinen Artikel „3 Gründe, warum auch Web-Entwickler:innen von Barrierefreiheit profitieren“.

Styling der Description List

Das Standard-Design von Beschreibungslisten ist eher fad. Aber keine Sorge! Ihr könnt das Element frei mit CSS gestalten. Die HTML-Spezifikation erlaubt es, jedes Schlüssel-Wert-Paar in ein <div>-Element zu verpacken.

<dl> <div> <dt>Account Owner</dt> <dd>Martina Musterfrau</dd> </div> <div> <dt>Banking Institute</dt> <dd>Musterbank</dd> </div> <div> <dt>IBAN</dt> <dd>AT12 3456 7891 2345 6789</dd> </div> </dl>

Diese Struktur des Inhalts erlaubt uns, ein responsives, horizontales Layout mit CSS-Flexbox zu gestalten:

dl { display: flex; flex-wrap: wrap; gap: 1rem; } dl > div { flex-grow: 1; } dt { color: #6e2755; font-size: 0.9rem; font-weight: bold; } dd { font-size: 1rem; margin-inline-start: 0; }

So sieht die Liste am Ende aus:

Screenreader-Unterstützung

Das Beschreibungsliste-Element macht eure Inhalte besser zugänglich, insbesondere für Screenreader-Nutzer:innen. Es gibt kleine Unterschiede zwischen Browsern und Screenreadern, aber insgesamt ist die Unterstützung ziemlich gut. Adrian Roselli hat für seinen Artikel „Brief Note on Description List Support“ ausführliche Screenreader-Tests durchgeführt.

Ich will seiner Analyse nur einen Gedanken hinzufügen: Screenreader sind auch nur Software. Programme können Bugs haben oder Features nicht vollständig implementieren (wie etwa den korrekten Umgang mit dem <dl>-Element). Aber das sollte uns nicht davon abhalten, dieses Feature in der Web-Entwicklung einzusetzen. Vor allem dann, wenn absehbar ist, dass die Screenreader-Hersteller die Fehler in naher Zukunft beheben werden.

Erstellt am