Listen richtig nutzen: ul, ol & dl

HTML kennt drei Listentypen: <ul> für Aufzählungen ohne feste Reihenfolge, <ol> für Schritte und Rangfolgen, bei denen die Reihenfolge Bedeutung trägt, und <dl> für Paare aus Begriff und Beschreibung. Nur echte Listen-Elemente machen diese Struktur maschinenlesbar – ein Screenreader sagt dann etwa „Liste, 4 Einträge“ an, während nachgebaute Aufzählungen aus Absätzen und Bindestrichen bloßer Fließtext bleiben.

Listen gehören zu den am häufigsten gebrauchten – und am häufigsten missbrauchten – Strukturen im Web. Auf dieser Seite zeige ich dir, wann welcher Listentyp passt, wie du die Nummerierung mit start, reversed und value steuerst, wie Verschachtelung korrekt funktioniert, was Screenreader konkret ansagen – und warum ausgerechnet Safari die Listensemantik entfernt, sobald du Aufzählungszeichen per CSS ausblendest.

Das Wichtigste in Kürze

• <ul> für Sammlungen ohne feste Reihenfolge, <ol> für geordnete Abläufe, <dl> für Paare aus Begriff und Beschreibung. Die Prüffrage: Würde Vertauschen den Sinn ändern?
• Screenreader sagen Typ und Anzahl an – „Liste, 4 Einträge“ –, bei <ol> zusätzlich die Nummer jedes Eintrags. Bei nachgebauten Aufzählungen entfällt das.
• Die <ol>-Attribute start, reversed, value und type lösen Nummerierungsprobleme ohne CSS und ohne JavaScript.
• Unterlisten gehören in das <li>, nicht daneben. Verschachtelte <ol> beginnen jeweils wieder bei 1 – eine Gliederungsnummerierung wie 1.1 braucht CSS-Zähler.
• Eine <dl>-Gruppe besteht aus einem oder mehreren <dt>, gefolgt von einem oder mehreren <dd>; jede Gruppe darf zum Stylen in ein <div> gewickelt werden.
• Safari-Falle: list-style: none entfernt in Safari/VoiceOver die Listenansage – außer innerhalb von <nav>. Gegenmittel ist ein explizites role="list".
• Navigationslinks gehören in eine <ul> innerhalb von <nav>, Breadcrumbs in eine <ol>, weil dort die Reihenfolge Bedeutung trägt.
• Nicht alles ist eine Liste: Mehrdimensionale Daten gehören in eine Tabelle, Layout in ein <div> mit Grid.
• WCAG-Bezug: 1.3.1 Info und Beziehungen (Stufe A) verlangt genau diese maschinenlesbaren Beziehungen.

Die drei Listentypen

<ul> – ungeordnete Liste

Für Aufzählungen, bei denen die Reihenfolge keine Rolle spielt: Merkmale, Vorteile, eine Sammlung von Links. Der Browser stellt die Einträge standardmäßig mit einem gefüllten Punkt dar.

<ul>
  <li>Wahrnehmbar</li>
  <li>Bedienbar</li>
  <li>Verständlich</li>
  <li>Robust</li>
</ul>

<ol> – geordnete Liste

Wenn die Reihenfolge Bedeutung trägt: Arbeitsschritte, Rangfolgen, nummerierte Anleitungen. Die Nummerierung erzeugt der Browser automatisch – du schreibst keine Zahlen in den Quelltext.

<ol>
  <li>Semantisch auszeichnen</li>
  <li>Mit CSS gestalten</li>
  <li>Mit Tastatur testen</li>
</ol>

Der Praxistest: Würde ein Vertauschen der Einträge den Sinn verändern? Dann <ol>. Sonst <ul>.

<dl> – Beschreibungsliste

Für Paare aus Begriff und Erläuterung: Glossare, Metadaten, Schlüssel-Wert-Paare wie die Eckdaten eines Produkts. <dt> ist der Begriff (description term), <dd> die Beschreibung (description details) – ein <li> gibt es hier nicht.

<dl>
  <dt>HTML</dt>
  <dd>Auszeichnungssprache für die Struktur von Webseiten.</dd>
  <dt>CSS</dt>
  <dd>Sprache zur Gestaltung dieser Struktur.</dd>
</dl>

Die <dl> wird oft vergessen. Für Schlüssel-Wert-Paare – etwa die Eckdaten eines Beitrags – nutze ich sie gern, weil sie die Beziehung „Begriff ↔ Erklärung“ sauber abbildet. Was die <dl> sonst noch kann, zeige ich weiter unten im Detail.

Randnotiz – das vierte Listen-Element. HTML kennt zusätzlich <menu>: semantisch eine ungeordnete Liste für interaktive Einträge, also Buttons statt Links – gedacht für Toolbars oder Teilen-Leisten. Im Accessibility-Tree erscheint es wie eine <ul>. Pflicht ist es nicht, aber es spart das eine oder andere bedeutungslose <div>.

Nummerierung steuern: start, reversed, value und type

Die <ol> bringt Attribute mit, die kaum jemand kennt – dabei lösen sie Alltagsprobleme ganz ohne CSS oder JavaScript:

Der Klassiker für start: Eine Anleitung wird von einem erklärenden Absatz unterbrochen und soll danach nahtlos weiterzählen.

<ol>
  <li>Backup anlegen</li>
  <li>Update einspielen</li>
</ol>

<p>Prüfe jetzt, ob die Seite noch erreichbar ist. Erst dann geht es weiter:</p>

<ol start="3">
  <li>Cache leeren</li>
  <li>Ergebnis kontrollieren</li>
</ol>

Mit reversed zählt die Liste abwärts – praktisch für Countdowns und Ranglisten, die auf Platz 1 zulaufen:

<p>Meine Top 3 der häufigsten HTML-Fehler:</p>
<ol reversed>
  <li>Überschriften-Ebenen überspringen</li>
  <li>Buttons als Links auszeichnen</li>
  <li>Listen mit Bindestrichen nachbauen</li>
</ol>
<!-- Der Browser nummeriert: 3., 2., 1. -->

Mit value springst du mitten in der Liste auf einen bestimmten Wert:

<ol>
  <li>Erster Eintrag</li>
  <li value="10">Dieser Eintrag bekommt die 10</li>
  <li>Hier wird mit 11 weitergezählt</li>
</ol>

Zwei Feinheiten: start erwartet immer eine ganze Zahl, auch wenn die Liste per type="i" römisch nummeriert ist – <ol type="i" start="3"> beginnt also bei „iii“. Und type solltest du nur einsetzen, wenn die Nummerierungsart inhaltlich zählt (etwa bei Vertragsklauseln, auf die als „Punkt 3a“ verwiesen wird) – reine Optik gehört in die CSS-Eigenschaft list-style-type.

Verschachtelung – und was mit der Nummerierung passiert

Listen lassen sich beliebig tief verschachteln, auch gemischt aus <ul> und <ol>. Die Unterliste gehört dabei in das jeweilige <li>, nicht daneben:

<!-- Falsch: Unterliste als Geschwister des li – ungültiges HTML -->
<ul>
  <li>Semantisches HTML</li>
  <ul>
    <li>Struktur-Elemente</li>
  </ul>
</ul>

<!-- Richtig: Unterliste innerhalb des li -->
<ul>
  <li>
    Semantisches HTML
    <ul>
      <li>Struktur-Elemente</li>
      <li>Textauszeichnung</li>
    </ul>
  </li>
  <li>Barrierefreie Komponenten</li>
</ul>

Browser „reparieren“ die falsche Variante zwar stillschweigend, der Validator meldet sie aber als Fehler – und die Zugehörigkeit der Unterliste zum übergeordneten Eintrag geht verloren.

Bei verschachtelten <ol> gibt es eine Überraschung: Jede Unterliste beginnt wieder bei 1. Eine automatische Gliederungsnummerierung wie 1, 1.1, 1.1.1 ist mit HTML allein nicht möglich – dafür brauchst du CSS-Zähler (counters()). Für die Semantik ist das unerheblich: Die Hierarchie steckt bereits in der Verschachtelung.

Die <dl> im Detail

Die Beschreibungsliste ist flexibler, als die meisten denken. Eine <dl> besteht aus Gruppen: ein oder mehrere <dt>, gefolgt von einem oder mehreren <dd>. Beide Richtungen sind erlaubt.

Mehrere Begriffe, eine Beschreibung – etwa bei Synonymen:

<dl>
  <dt>Screenreader</dt>
  <dt>Vorleseprogramm</dt>
  <dd>Software, die Bildschirminhalte als Sprache oder Braille ausgibt.</dd>
</dl>

Ein Begriff, mehrere Beschreibungen:

<dl>
  <dt>BFSG</dt>
  <dd>Barrierefreiheitsstärkungsgesetz.</dd>
  <dd>Deutsches Gesetz, das den European Accessibility Act umsetzt.</dd>
</dl>

Seit einigen Jahren erlaubt der HTML-Standard außerdem, jede Begriff-Beschreibung-Gruppe in ein <div> zu packen – als reiner Styling-Wrapper, etwa für CSS Grid oder Rahmen pro Gruppe. Die Semantik bleibt unverändert, wie die MDN-Referenz zum dl-Element dokumentiert:

<dl>
  <div>
    <dt>Autor</dt>
    <dd>Jakob Sommer</dd>
  </div>
  <div>
    <dt>Lesezeit</dt>
    <dd>8 Minuten</dd>
  </div>
</dl>

Zwei Warnungen aus der Praxis: Die <dl> ist kein Einrückungs-Werkzeug – wer sie nur nutzt, weil <dd> standardmäßig eingerückt dargestellt wird, missbraucht Semantik für Optik (dafür gibt es margin). Und Screenreader behandeln Beschreibungslisten uneinheitlich: VoiceOver kündigt sie seit iOS 14 als Liste an, andere Screenreader lesen die Paare schlicht nacheinander vor. Das ist kein Problem – die <dl> ist linearisierbar, die Reihenfolge Begriff → Beschreibung bleibt beim Vorlesen erhalten.

Warum echte Listen besser sind als nachgebaute

Technisch könntest du eine Aufzählung auch mit Absätzen und Bindestrichen „malen“. Semantisch fehlt dann aber die entscheidende Information: dass es sich um eine zusammengehörige Liste mit einer bestimmten Anzahl an Einträgen handelt.

<!-- Nachgebaut: optisch eine Liste, semantisch nur Text -->
<p>– Wahrnehmbar<br />– Bedienbar<br />– Verständlich</p>

<!-- Echte Liste: Struktur ist vorhanden -->
<ul>
  <li>Wahrnehmbar</li>
  <li>Bedienbar</li>
  <li>Verständlich</li>
</ul>

Genau hier greift auch die WCAG: Erfolgskriterium 1.3.1 Info und Beziehungen (Stufe A) verlangt, dass Strukturen und Beziehungen, die visuell vermittelt werden, auch programmatisch bestimmbar sind. Eine Aufzählung, die nur aussieht wie eine Liste, verfehlt dieses Kriterium – eine echte <ul> erfüllt es ganz nebenbei. Das W3C-WAI-Tutorial zur Inhaltsstruktur führt Listen deshalb als festen Bestandteil barrierefreier Seitenstruktur.

Randnotiz – mehr als nur Screenreader. Dieselbe Listenstruktur lesen auch Web-Crawler (Suchmaschinen wie Googlebot) und KI-Crawler (etwa GPTBot oder ClaudeBot). Beide extrahieren aus <ul>/<ol> saubere, abgegrenzte Einträge – ideal etwa für Schritt-für-Schritt-Anleitungen oder Merkmalslisten, die in Suchergebnissen oder KI-Antworten auftauchen sollen. Eine echte Liste ist damit auch eine Investition in die Auffindbarkeit.

Was Screenreader konkret ansagen

Der Nutzen echter Listen wird hörbar, sobald du eine Seite mit Screenreader testest:

• Beim Einstieg in die Liste wird der Typ und die Anzahl angesagt, etwa „Liste, 4 Einträge“. Nutzerinnen und Nutzer wissen sofort, was sie erwartet – und können entscheiden, ob sich das Anhören lohnt.
• Bei einer <ol> wird die Nummer jedes Eintrags mitgelesen („1: Semantisch auszeichnen“). Die Reihenfolge ist damit auch ohne Sicht nachvollziehbar.
• Beim Verlassen melden viele Screenreader das Ende der Liste, sodass klar ist, wo die Aufzählung aufhört und der Fließtext weitergeht.
• Per Schnellnavigation lassen sich Listen direkt anspringen – in NVDA etwa mit der Taste L von Liste zu Liste.

All das entfällt bei nachgebauten Aufzählungen. Aus „Liste, 3 Einträge“ wird dann ein zusammenhangloser Textbrei aus Bindestrichen.

Die Safari-Falle: list-style: none entfernt die Semantik

Jetzt wird es tückisch. Safari entfernt die Listensemantik aus dem Accessibility-Tree, sobald eine <ul> oder <ol> per list-style: none (oder anderweitig) ihre Aufzählungszeichen verliert. VoiceOver kündigt die Liste dann nicht mehr als Liste an – obwohl im Quelltext ein korrektes Listen-Element steht. Andere Browser wie Chrome oder Firefox verhalten sich nicht so.

Das ist kein Bug, sondern Absicht: Das WebKit-Team begründet die Entscheidung mit der grassierenden „Listitis“ – Entwickler verpacken alles Mögliche in Listen, und wenn ohnehin jeder visuelle Hinweis entfernt wird, sei die Listenansage für niemanden hilfreich. Zwei Ausnahmen und ein Gegenmittel solltest du kennen:

• Ausnahme Navigation: Liegt die Liste in einem <nav>-Element, behält Safari die Semantik auch ohne Aufzählungszeichen bei. Menüs sind also nicht betroffen.
• Gegenmittel role="list": Ein explizites role="list" auf der <ul> oder <ol> stellt die Ansage zuverlässig wieder her.

<ul role="list" class="tag-liste">
  <li>HTML</li>
  <li>CSS</li>
  <li>ARIA</li>
</ul>

.tag-liste {
  list-style: none;
  padding-left: 0;
}

Ja, das widerspricht der Faustregel, native Semantik nicht mit ARIA zu doppeln – hier ist die Dopplung der dokumentierte Workaround. Wie du das Verhalten selbst nachvollziehst, zeigt Mit VoiceOver testen.

Randnotiz – kein Grund zur Panik. Ob die fehlende Listenansage im Einzelfall ein echtes Problem ist, hängt vom Inhalt ab. Bei einer Tag-Wolke mit drei Einträgen ist der Verlust verschmerzbar, bei einer 20-teiligen Merkmalsliste nicht. Im Zweifel: mit echten Nutzerinnen und Nutzern testen statt reflexhaft überall role="list" zu verteilen.

Listen in Navigation und Breadcrumbs

Navigationslinks gehören in eine Liste innerhalb von <nav>. So ist sofort klar, wie viele Einträge das Menü hat – eine Information, die bei reinen Link-Reihen fehlt:

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="/index.html">Start</a></li>
    <li><a href="/blog.html">Blog</a></li>
  </ul>
</nav>

Für Breadcrumbs gilt dasselbe Prinzip – nur mit <ol>, denn hier trägt die Reihenfolge Bedeutung: Sie bildet die Hierarchie von der Startseite bis zur aktuellen Seite ab.

<nav aria-label="Brotkrümelnavigation">
  <ol>
    <li><a href="/index.html">Start</a></li>
    <li><a href="/semantisches-html.html">Semantisches HTML</a></li>
    <li aria-current="page">Listen richtig nutzen</li>
  </ol>
</nav>

Das komplette Muster inklusive Styling und Trennzeichen findest du unter Breadcrumbs barrierefrei umsetzen, mehr zu Navigationsbereichen unter Struktur-Elemente: header, nav, main & footer.

Listen gestalten: ::marker und eigene Zähler

Für die Optik brauchst du keine Semantik zu opfern. Das Pseudoelement ::marker gestaltet Aufzählungszeichen und Nummern direkt – ohne zusätzliche <span>-Elemente:

li::marker {
  color: #b4552d;
  font-weight: 700;
}

Drei weitere Stellschrauben: list-style-type ändert die Art des Zeichens (Kreis, Quadrat, römische Ziffern), list-style-position steuert, ob das Zeichen im oder vor dem Textblock hängt, und der Einzug steckt im padding-left der Liste – nicht in einem eigenen Attribut. Für komplexe Nummerierungen wie 1.1, 1.2 sind CSS-Zähler (counter() / counters()) das Mittel der Wahl.

Wann eine Liste die falsche Wahl ist

Die „Listitis“, über die sich das WebKit-Team beklagt, ist real – nicht alles, was mehrfach vorkommt, ist eine Liste:

• Fließtext bleibt Fließtext. Drei Beispiele in einem Satz („etwa Rot, Grün und Blau“) brauchen keine Auszeichnung als Liste.
• Mehrdimensionale Daten gehören in Tabellen. Sobald jeder Eintrag mehrere gleichartige Eigenschaften hat (Name, Preis, Verfügbarkeit …), ist eine Tabelle mit Kopfzellen die passende Struktur – keine <dl> und erst recht keine verschachtelte <ul>.
• Layout ist kein Listengrund. Wer Elemente nur in <li> packt, um sie nebeneinander anzuordnen, erzeugt sinnlose Ansagen („Liste, 1 Eintrag“) – ein <div> mit Flexbox oder Grid tut es genauso.
• Überschriften ersetzen keine Listen – und umgekehrt. Abschnitte einer Seite strukturierst du mit Überschriften, nicht mit einer Liste aus langen Textblöcken.

Häufige Fehler

• Listen mit <br> und Bindestrichen nachbauen, statt <ul>/<ol> zu nutzen – die Struktur ist dann weder hör- noch auswertbar.
• Reihenfolge ignorieren: <ul> für Schritte, bei denen die Folge zählt.
• Unterliste falsch verschachteln (neben dem <li> statt darin).
• list-style: none ohne role="list" – in Safari/VoiceOver verschwindet die Listenansage (außer innerhalb von <nav>).
• Die <dl> als Einrückungs-Werkzeug missbrauchen, weil <dd> standardmäßig eingerückt dargestellt wird.
• Nummern von Hand in den Text schreiben („1. Schritt“) statt die automatische Zählung der <ol> zu nutzen – bei Änderungen musst du sonst alles neu durchnummerieren.
• type fürs Aussehen einsetzen, wo list-style-type in CSS hingehört.
• Nur fürs Layout in Listen verpacken, was inhaltlich keine Liste ist.
• <dl> übersehen, wo Begriff-Beschreibung-Paare genau passen würden.

Häufige Fragen

<ul> oder <ol> – woran entscheide ich?

Frag dich, ob die Reihenfolge Bedeutung trägt. Würde ein Vertauschen der Einträge den Sinn verändern (z. B. bei Arbeitsschritten), nimm <ol>. Sonst <ul>.

Darf ich Listen ohne Aufzählungszeichen darstellen?

Ja. Das Aufzählungszeichen entfernst du per CSS (list-style: none), die Semantik bleibt im HTML erhalten. Beachte aber die Safari-Besonderheit: Dort geht die Listenansage in VoiceOver verloren, sofern die Liste nicht in einem <nav> liegt – ein role="list" auf dem Listen-Element stellt sie wieder her.

Wie lasse ich eine Liste bei 10 beginnen oder rückwärts zählen?

Mit den <ol>-Attributen: <ol start="10"> beginnt bei 10, <ol reversed> zählt abwärts. Einzelne Einträge setzt du mit <li value="42"> auf einen bestimmten Wert – ab dort wird weitergezählt. Alles ohne CSS und JavaScript.

Kann ein Begriff mehrere Beschreibungen haben – oder umgekehrt?

Ja, beides. Eine <dl>-Gruppe besteht aus einem oder mehreren <dt>, gefolgt von einem oder mehreren <dd>. Synonyme teilen sich eine Beschreibung, ein Begriff kann mehrere Erläuterungen bekommen. Zusätzlich darf jede Gruppe zum Stylen in ein <div> gewickelt werden.

Warum beginnt meine verschachtelte Liste wieder bei 1?

Weil jede <ol> ihre eigene Zählung führt – das ist Standardverhalten. Eine durchgehende Gliederungsnummerierung (1.1, 1.2, 2.1) erzeugst du bei Bedarf mit CSS-Zählern; HTML allein kann das nicht.

Fazit

Drei Listentypen, drei Bedeutungen: <ul> für Sammlungen ohne feste Reihenfolge, <ol> für geordnete Abläufe, <dl> für Begriff-Erklärungs-Paare. Die <ol>-Attribute start, reversed und value lösen Nummerierungsprobleme ohne eine Zeile CSS, und mit role="list" hast du ein Gegenmittel für Safaris Eigenwilligkeit bei list-style: none zur Hand. Eine echte Liste kostet keinen Mehraufwand, liefert aber Struktur für Menschen und Maschinen. Wie sich dieses Prinzip durch die gesamte Auszeichnung zieht, zeigt Was ist semantisches HTML?.

Quellen

• Content Structure – Page Structure Tutorial (W3C Web Accessibility Initiative – Listen als Bestandteil barrierefreier Inhaltsstruktur)
• <ol>: Das Element für geordnete Listen (MDN Web Docs – Referenz zu start, reversed, value und type)
• <dl>: Das Beschreibungslisten-Element (MDN Web Docs – erlaubte Struktur inklusive div-Wrapper und Screenreader-Hinweisen)
• „Fixing“ Lists (Scott O’Hara – Analyse des Safari-Verhaltens bei list-style: none samt role="list"-Workaround)