HTML-Listen für barrierefreie Aufzählungen

Wir schreiben sie jeden Tag: ToDo-Listen, Checklisten, Einkaufslisten. Und doch machen wir uns selten darüber Gedanken, was so eine Liste eigentlich ist. Dabei ist es einfach: Listen sind alle Arten von Aufzählungen. Immer dann, wenn man also übersichtlich mehrere Stichpunkte zu einem Thema schreiben möchte, dann hat man grundsätzlich eine Liste. Schauen wir uns heute an, welche Möglichkeiten HTML bietet um Listen auszuzeichnen und wo die jeweiligen Besonderheiten liegen. 

Warum sind Listen wichtig?

Listen und Aufzählungen geben Ihrem Text Struktur. Sie können beim Lesen viel schneller überflogen werden und machen Ihre Inhalte so deutlich einfacher lesbar. Testen Sie es doch einmal selbst. Welche der beiden TODO-Zettel würden Sie bevorzugen?

Das gilt natürlich auch, wenn wir an die barrierefreie Websites denken. Denn so wie unser Auge auf den ersten Blick erkennt, wie lang die Liste ist, lesen Screenreader genau diese wichtige Information vor. Auch Nutzer von Screenreadern wissen also auf Anhieb, dass es sich um eine Liste von Stichpunkten zu einem Thema handelt und wieviele Einträge sie hat.

Genau deshalb schreibt die WCAG auch die Verwendung von korrektem Markup vor. Hier heißt es auf deutsch übersetzt:

Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Das heißt, die WCAG fordert semantisch korrektes HTML. Ein Markup, dass die korrekte Bedeutung und Beziehung der Elemente zueinander widerspiegelt. Hier kommen auch Listen ins Spiel. Die wichtigste Liste, die alle Websites besitzen, ist dabei das Menü, denn natürlich gehören auch Listen von Links dazu. Also schauen wir uns an, wie sie entstehen.

Wie erstellt man Listen in HTML?

Um Listen in HTML zu erstellen, stehen uns drei unterschiedliche HTML-Tags zur Verfügung: ul, ol und dl. Bei allen dreien handelt es sich um HTML-Listen, doch es gibt wichtige Unterschiede. Um die zu verstehen, schauen wir uns alle drei einzeln an.

Ungeordnete Listen mit <ul>

Ungeordnete Listen werden mit dem ul-Tag ausgezeichnet, der unordered list. Bei diesen Listen ist die Reihenfolge der Einträge unwichtig und könnte auch in umgekehrter Reihenfolge gelesen werden. Wenn Sie Ihren Einkaufszettel also nicht gerade nach dem perfekten Laufweg planen, dann wird dieser vermutlich unsortiert so aufgeschrieben, wie Ihnen die Dinge in den Kopf kamen. 

Ein digitaler Einkaufszettel könnte beispielsweise so aussehen:

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li>Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
</ul>

Sie sehen, Listen bestehen aus mehreren Elementen. Diese Listenelemente werden jeweils mit einem <li> ausgezeichnet und können wiederum Listen enthalten. So können Sie Inhalte beliebig verschachteln um diese hierarchisch zu ordnen. Die Anstriche der einzelnen Stichpunkte wechseln dabei je nach Ebene, die Browser nutzen hier voreingestellte Standards. Wollen Sie Ihre ungeordnete Liste gestalten, dann benötigt es ein wenig CSS. So können Sie sich auch andere Aufzählungspunkte oder gleich ganz eigene Anstriche aussuchen. 

Diese Aufzählungszeichen gehören zum Standard in HTML5 und werden im Attribut type definiert:

• circle
• disc
• square
• none

Mit dem CSS von stolperfrei.digital sieht unser Einkaufszettel so aus:

• Brot (weil Luft und Liebe nicht satt machen)
• Käse (eine Sorte reicht nicht, also besser gleich drei)
• Gemüse (damit das Gewissen beruhigt ist)
• Schokolade (weil Gemüse allein auch nicht glücklich macht)
• Dinge, die ich garantiert vergesse:
  • Klopapier (merke ich erst, wenn es zu spät ist)
  • Spülmittel (weil ich den leeren Behälter seit Tagen ignoriere)
  • Batterien (für die Fernbedienung, die ich seit Wochen schüttel)
• Etwas, das nicht auf dem Zettel steht, aber trotzdem im Wagen landet

Geordnete Listen mit <ol>

Geordnete Listen, die ordered lists, dagegen werden mit dem HTML-Tag <ol> beschrieben. Bei diesen spielt die Reihenfolge der Einträge eine wichtige Rolle. Stellen Sie sich beispielsweise die Aufbauanleitung eines Schranks vor. Hier ist es wichtig, ob man als Erstes den Schrank zusammenschraubt oder zuerst versucht die Schubkästen hineinzuschieben. Die Einträge werden dabei aufsteigend sortiert und nummeriert. 

Schauen wir uns eine kleine Aufbauanleitung an:

<ol>
  <li>Punkt 1</li>
  <li>Punkt 2
    <ol>
      <li>Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
</ul>

Sortierte Listen folgen im Prinzip demselben Aufbau wie unsortierte Listen. Jedes Listenelement wird in ein eigenes <li>-Tag gekapselt und kann wiederum weitere Listen enthalten. Die Nummerierung erfolgt dabei durch den Browser selbst. Auch bei sortierten Listen haben Sie aber die Wahl zwischen unterschiedlichen Aufzählungszeichen bzw. Arten der Nummerierung. 

Folgende Optionen stehen im Attribut type für das ol-Element zur Verfügung:

• 1 (Der Standard, Nummerierung mit arabischen Zahlen)
• A (alphabetisch in Großbuchstaben)
• a (alphabetisch in Kleinbuchstaben)
• I (römische Ziffern in Großbuchstaben)
• i (römische Ziffern in Kleinbuchstaben)

Aber auch ol lassen sich mithilfe von CSS nach eigenen Wünschen gestalten. Das ist zwar etwas komplizierter, aber mithilfe der CSS-Funktion counter() auch kein Problem. 

Und so sieht das Ganze dann im stolperfrei-Design aus:

1. Auspacken & Staunen – So viele Schrauben? Das kann nicht sein. Oder doch?
2. Anleitung studieren – In dieser Reihenfolge:
   1. Erst ignorieren (weil du das auch so hinkriegst).
   2. Dann flüchtig überfliegen (weil die ersten Teile nicht zusammenpassen).
   3. Schließlich verzweifelt Schritt für Schritt befolgen (weil der Schrank sonst ein abstraktes Kunstwerk wird).
3. Schrauben sortieren – Erst nach Größe, dann nach Farbe, am Ende einfach in einen Haufen kippen.
4. Aufbauversuch Nr. 1 – Merke: Das, was du zuerst montierst, ist garantiert falsch herum.
5. Fertig! (Fast…) – Zwei Schrauben bleiben übrig. Die brauchte es bestimmt nicht. Hoffentlich.

Definitionslisten mit <dl>

Man könnte meinen, mit sortierten und unsortierten Listen wäre schon alles gesagt. Doch es gibt noch eine dritte Art, den Underdog unter den Aufzählungen. Ich spreche von den Definitionslisten, auch description lists genannt. Sie werden mithilfe des dl-Tags ausgezeichnet und dienten ursprünglich nur der Darstellung von Begriffsdefinitionen, also den klassischen Glossaren oder Lexika. Jeder Begriff konnte eine oder mehrere Erklärungen aufweisen. Inzwischen hat sich die offizielle Definition der Definitionsliste auch beim W3C geändert und sie dürfen für jede Art von „Term plus Beschreibung“ eingesetzt werden. Der für mich typischste Anwendungsfall sind deshalb eigentlich Kontaktdaten. 

<dl>
    <dt>Term 1</dt>
    <dd>Erklärung, Term 1</dd>

    <dt>Term 2</dt>
    <dd>Erklärung 1, Term 2</dd>
    <dd>Erklärung 2, Term 2</dd>
</dl>

Wie man schnell sieht, erfolgen in Definitionslisten keine Aufzählungen mit li-Elementen. Stattdessen werden ohne eigene Gruppierung mehrere dt-Tags (description term oder auch definition term, der zu erklärende Begriff) und dd-Tags (description details oder gern auch mal description definition, kennzeichnet die Beschreibung). Dabei kann ein Term durchaus mehrere Definitionen haben, eine Definition aber auch zu mehreren Termen gehören. Das erschließt sich nur durch die Reihenfolge, in der man diese anlegt. 

Eine Strukturierung der Listeneinträge mit li, wie das ol- und ul-Tag sie vorsehen, machen es der Gestaltung mit CSS etwas einfacher. Schon lange gibt es deshalb Überlegungen, auch für das dl-Element ein solches Element einzuführen. Aber auch jetzt können wir mit ein wenig CSS-Magie eine Ansprechende Gestaltung erschaffen. Meistens werden diese Listen zweispaltig dargestellt um den vorhandenen Platz an größeren Monitoren perfekt zu nutzen: Termin links, Beschreibung(en) rechts.

Und so kann unser Kontaktblock dann aussehen:

Könnte man eine Definitionsliste nicht auch als Tabelle erstellen?

Wenn man Kontaktblöcke und auch viele andere Anwendungen der der Definitionsliste sowieso zweispaltig setzt, könnte man dann nicht auch gleich eine Tabelle nehmen? Tatsächlich ist das der häufigste Fehler, den ich in meinen Tests sehe. Vermutlich liegt das auch daran, dass in den meisten WYSIWYG-Editoren garkeine dl-Elemente zur Verfügung stehen. Es benötigt hier also technisches Verständnis der HTML Grundlagen um diese direkt in den Quelltext zu schreiben. Ein Umweg den, verständlicherweise, nur wenige Redakteure gehen. 

Aber es gibt einen wichtigen Unterschied zwischen Tabellen und Listen: letztere sind linearisierbar. Das heißt, ohne auch nur einen Funken an Information zu verlieren, kann ich sie in einer Linie vorlesen. Man könnte sozusagen eine Zick-Zack-Schnur vom dt-Element zum dd-Element und wieder vor zum nächsten dt ziehen. Anschließend lesen Screenreader einfach an der Schnur entlang. In welcher Spalte der Text optisch steht, spielt keine Rolle. Man spricht von einer Layouttabelle, also einer rein optischen Anordnung in Spalten.

Echte Datentabellen dagegen, haben Spaltenüberschriften, die den Wert darunter erklären. Um eine einzelne Zelle zu verstehen, benötigt man immer die jeweilige Zeilenüberschrift und die Spaltenüberschrift.

Beispielsweise kann man sich so eine Übersicht der häufigsten Ausreden fürs Zuspätkommen darstellen lassen:

Über barrierefreie Tabellen habe ich übrigens schon einmal ausführlich gebloggt. 

Fazit – Eine HTML-Liste strukturiert Ihren Text

Alle drei HTML-Elemente geben Ihrem Text Struktur. Sowohl für sehende als auch blinde Nutzer. Stichpunkte lassen sich einfach überfliegen und helfen Nutzern, Ihre Inhalte zu verstehen. Dabei ist es egal, ob sie Glossare oder die Features Ihres Produktes beschreiben. Auch meine Übersicht aller Blog-Artikel ist eine Liste. Um geordnete und ungeordnete Listen, genauso wie Definitionslisten, kommen Sie bei der Erstellung einer barrierefreien Website nicht drumrum.