<ul>

Eine ungeordnete Liste ist mehr als nur ein paar Punkte mit Aufzählungszeichen. Für den Browser (und besonders für Screenreader) hat eine <ul> eine klare Bedeutung: “Hier kommt eine Gruppe zusammengehöriger Einträge, deren Reihenfolge austauschbar ist.” Ein Screenreader liest zum Beispiel an: “Liste mit 4 Einträgen”, bevor er die einzelnen Punkte vorliest. Das gibt blinden Nutzern sofort eine Orientierung, wie viel Inhalt kommt.

• <ul> ist ein Block-Element und beginnt auf einer neuen Zeile
• Direkte Kindelemente müssen <li>-Elemente sein, nichts anderes darf direkt in <ul> stehen
• Standardmäßig zeigt der Browser Aufzählungszeichen (Bullets) an, die du mit CSS anpassen oder entfernen kannst
• Listen können verschachtelt werden: Eine <ul> innerhalb eines <li> erzeugt eine Unterliste
• <ul> ist auch der Baustein für Navigationen: Das Muster <nav> > <ul> > <li> > <a> ist Standard im modernen Web

Wann <ul>, wann <ol>?

Die Faustregel ist einfach: Wenn du die Einträge umsortieren könntest und der Sinn gleich bleibt, nimm <ul>. Wenn die Reihenfolge wichtig ist, nimm <ol>.

• <ul> (ungeordnet): Zutaten, Features, Navigationspunkte, Tags
• <ol> (geordnet): Schritt-für-Schritt-Anleitungen, Ranglisten, Platzierungen

Screenreader kündigen eine <ul> als “Liste mit X Einträgen” an, bevor sie die einzelnen Punkte vorlesen. Das gibt Nutzern sofort eine Vorstellung davon, wie viel Inhalt kommt und ob sie die Liste überspringen möchten. Deshalb ist es wichtig, Listen semantisch korrekt zu verwenden. Ein <div> mit visuellen Aufzählungszeichen wird von Screenreadern nicht als Liste erkannt.

Bei verschachtelten Listen kommuniziert der Screenreader die Hierarchie-Ebene, sodass Nutzer verstehen, dass sie sich in einer Unterliste befinden. Vermeide allerdings zu tiefe Verschachtelungen (mehr als drei Ebenen), da die Navigation sonst unübersichtlich wird.

Wenn du list-style: none in CSS setzt, entfernt Safari in VoiceOver die Listen-Semantik. Das ist ein bekanntes Problem. Du kannst es mit role="list" auf dem <ul>-Element lösen, wenn die Listen-Semantik für den Kontext wichtig ist.

• Direkte Kinder müssen <li> sein: Wenn du <ul><div>...</div></ul> schreibst, ist das ungültiges HTML. Der Browser versucht es zu reparieren, aber das Ergebnis ist unvorhersehbar. Nur <li> darf direkt in <ul> stehen. Andere Elemente gehören innerhalb der <li>-Elemente.

• <ul> für geordnete Daten: Wenn die Reihenfolge deiner Einträge eine Bedeutung hat (z.B. “Schritt 1, Schritt 2, Schritt 3” einer Anleitung), verwende <ol> statt <ul>. Das ist nicht nur semantisch korrekter, sondern gibt Screenreadern auch die Information, dass es eine nummerierte Abfolge ist.

• Leere Listen: Eine <ul> ohne <li>-Elemente ist zwar technisch erlaubt, aber sinnlos und kann bei Screenreadern für Verwirrung sorgen. Wenn du eine Liste dynamisch befüllst und sie leer sein kann, blende den gesamten <ul>-Block aus, statt eine leere Liste zu rendern.

• Liste nur für Styling: Verwende <ul> nur, wenn du tatsächlich eine Aufzählung zusammengehöriger Punkte hast. Wenn du lediglich Elemente untereinander darstellen willst, nutze Flexbox oder Grid auf einem <div>.

Das ul-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Auch CSS-Anpassungen wie list-style-type oder list-style: none funktionieren überall zuverlässig.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Ungeordnete Listen werden in den meisten Email-Clients unterstützt, allerdings mit Einschränkungen bei Margins und Padding in Outlook.

• Apple Mail

  Komplett

• Gmail

  Komplett

• Outlook

  Teilweise

  Outlook setzt eigene Margins und Padding auf Listen. Die Einrückung und Aufzählungszeichen können von anderen Clients abweichen.

• Thunderbird

  Komplett

• Yahoo Mail

  Komplett