CSS und Barrierefreiheit: Wie Stile das Verständnis von UL/OL-Listen beeinflussen

von Rashid Bairamov

Definition

HTML-Listen (<ul>, <ol>, <li>) sind von Haus aus semantische Strukturelemente. Screenreader erkennen sie und geben zusätzliche Informationen wie „Liste mit 5 Einträgen“ aus. Auch für Sehende schaffen Listen Orientierung im Text.

Doch: Mit CSS lassen sich Marker, Abstände und Strukturen beeinflussen. Das kann zugunsten der Barrierefreiheit wirken – oder sie erheblich verschlechtern.

Bedeutung

  • Für Screenreader: Listen sind wichtige Navigationspunkte. Nutzer*innen können von Eintrag zu Eintrag springen oder die Liste komplett überspringen.

  • Für Sehende: Marker und Abstände machen aus Fließtext eine klar erkennbare Aufzählung.

  • Für kognitive Barrieren: Gut gestaltete Listen erleichtern das schnelle Erfassen von Inhalten.

Fehlerhafte CSS-Anpassungen können diese Vorteile zunichtemachen.

Ausreichende Techniken

Unterstützende CSS-Praktiken

  • Deutliche Marker beibehalten: Standardmarker oder ::marker mit kontraststarker Farbe.

  • Abstände optimieren: Genügend line-height und margin für bessere Lesbarkeit.

  • Struktur sichtbar machen: Einrückungen und Bullet-Styles nutzen, die sich klar vom Text abheben.

  • Skalierbarkeit prüfen: Bei Zoom (200 % und mehr) bleibt die Liste klar erkennbar.

Beispiel (gut)

ul {
  list-style: disc inside;
  padding-left: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

Beratungstechniken

  • Design-Teams aufklären: Wenn Marker entfernt werden sollen, muss eine visuelle Alternative eingebaut werden.

  • Fallbacks berücksichtigen: In Projekten, die auf VoiceOver/Safari abzielen, kann role="list" als Absicherung sinnvoll sein.

  • Icons richtig einsetzen: Falls Symbole als Marker verwendet werden, diese mit aria-hidden="true" versehen, damit Screenreader sie nicht doppelt ansagen.

  • Testing mit echten Screenreadern: NVDA, JAWS, VoiceOver in Kombination mit verschiedenen Browsern ausprobieren.

Mythos vs. Realität: list-style: none

Mythos

list-style: none; entfernt nur die visuellen Marker, die Semantik bleibt erhalten.

Realität

In der Spezifikation bleibt ein <ul> eine Liste – egal, wie sie per CSS gestylt wird.
In der Praxis jedoch verlieren bestimmte Screenreader/Browser-Kombinationen (z. B. ältere Safari/VoiceOver) die Listen-Semantik, wenn Marker entfernt sind. Sie lesen die Einträge dann nur noch wie normale Absätze vor.

Lösung

  • Marker nur entfernen, wenn visuell andere Hinweise gesetzt werden.

  • Bei Bedarf: role="list" ergänzen.

Beispiel (Fallback mit ARIA)

<ul role="list" class="list">
  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
  <li>Eintrag 3</li>
</ul>

Häufige Fehler

  • Alle Marker mit list-style: none; entfernen, ohne Ersatz.
  • Marker durch Bilder ersetzen, die Screenreader als „Grafik“ ausgeben.
  • Zu geringe Kontraste oder winzige Marker verwenden.
  • Mit display: flex/grid Marker unbeabsichtigt verschwinden lassen.