
Listen barrierefrei und benutzerfreundlich
[Materialsammlung]

Bedeutung von Listen
Listen sind ein wichtiges Strukturelement zur Verbesserung der Übersichtlichkeit. Unterpunkte, Arbeitsschritte und Begriffsklärungen erscheinen nicht unstrukturiert in einer Textwurst, sondern visuell und technisch als Punkte in einer Liste.
In HTML stehen folgende Listentypen zur Verfügung:
- Ungeordnete Liste
- Eine Liste für gleichwertige Aufzählungspunkte, jeweils mit demselben Indikator für den Aufzählungspunkt.
- Nummerierte Liste
- Liste mit Relevanz der Anordnung einzelner Listenelemente. Der Indikator für den einzelnen Aufzählungspunkt ist numerisch oder alphabetisch geordnet.
- Definitionsliste
- Liste für Erläuterungen zu einem Ausdruck. Jedes Listenelement besteht aus einer Gruppe mit Ausdruck und Erläuterungen zum Ausdruck.

Allgemeine (ungeordnete) Liste
Bedeutung von ungeordneten Listen
Für eine ungeordnete Liste können wir uns typischerweise eine Einkaufsliste vorstellen. Auf Webseiten und in Dokumenten erscheinen derartige Listen mit Aufzählungspunkten, deren Reihenfolge inhaltlich nicht von Relevanz ist.
Technische Realisierung einer allgemeinen Liste
Eine gewöhnliche Liste wird mit dem <ul>
-Tag (Unordered List) umrandet. Die einzelnen Listenpunkte kommen in ein <li>
-Tag (List Item).
Jeder Listeneintrag wird dadurch vom Browser mit demselben Indikator versehen. Ein Screen Reader kann darüber hinaus die Anzahl der Listeneinträge ermitteln und wiedergeben.
Beispiel für die technische Realisierung einer allgemeinen unnummerierten Liste
Der Code für eine ungeordnete Liste für die Zutaten eines Kochrezepts könnte also etwa folgendermaßen aussehen:
<ul aria-label="Zutaten" > <li>½ kg Orangen</li> <li>1 Zitrone</li> […] </ul>

Geordnete Listen
Bedeutung von geordneten Listen
Für eine geordnete Liste können wir uns typischerweise eine Bauanleitung vorstellen. Zweckmäßig sind sie weiters, wenn es möglich sein sollte, auf einzelne Punkte gezielt zu referenzieren, etwa in Bestimmungen zu einem einzelnen Gesetzesartikel.
Technische Realisierung einer geordneten Liste
Eine geordnete Liste wird mit dem <ol>
-Tag (Ordered List) umrandet. Die einzelnen Listenpunkte kommen ebenso wie bei einer ungeordneten Liste in ein <li>
-Tag (List Item).
Jeder Listeneintrag wird dadurch vom Browser mit einem fortlaufenden Indikator versehen. Ein Screen Reader kann darüber hinaus die Anzahl der Listeneinträge vorweg angeben.
Ob dafür Ziffern, Buchstaben oder römische Zahlen erscheinen, kann mittels CSS-Eigenschaften festgelegt werden. Ein Screen Reader kann meiner Erfahrung nach die jeweiligen CSS-Indikatoren für Listenelemente korrekt interpretieren, wenn es sich streng genommen auch über die Vermittlung von Inhalten durch CSS handelt und nicht nur visuelle Darstellung.
Beispiel für die technische Realisierung einer geordneten Liste
Der Code für eine geordnete Liste für die Zubereitung eines Kochrezepts könnte also etwa folgendermaßen aussehen:
<ol aria-label="Zubereitung" > <li>Halbieren Sie Orangen und Zitronen. </li> <li>Pressen Sie die Orangen und Zitronen.</li> […] </ul>

Definitionslisten
Bedeutung von Definitionslisten
Für eine Definitionsliste können wir uns typischerweise ein Glossar vorstellen. Die Listenelemente enthalten zunächst einen Begriff und danach mögliche Bedeutungen.
Technische Realisierung einer Definitionsliste
Eine Definitionsliste wird mit dem <dl>
-Tag (Definition List) umrandet. Jeder Listeneintrag enthält ein <dt>
-Element (Definition Term) und ein oder mehrere <dd>-Elemente (Definition Description) zur Erläuterung der Bedeutung des Ausdrucks. Jedes dieser Elemente muss für eine korrekte Syntax vorhanden sein.
Eine Gruppe von Ausdrücken und deren Beschreibung kann folgende Kombinationen umfassen:
- Ausdruck + dessen Definitionen
- Personennamen + dazugehörige Personenangaben
- Frage + mögliche Antworten
- Kategorie + verfügbare Inhalte
- oder ähnliche Kombinationen von Ausdrücken und Beschreibung.
Beispiel für die technische Realisierung einer Definitionsliste
Ein Beispiel für eine Definitionsliste finden Sie auf dieser Seite unter den . Der Code dafür sieht auszugsweise folgendermaßen aus: Arten von Listen
<dl aria-label="Listenarten" > <dt>Ungeordnete Liste</dt> <dd>Eine Liste für gleichwertige Aufzählungspunkte, jeweils mit demselben Indikator für den Aufzählungspunkt.</dd> […] </dl>
Links zu Definitionslisten

Liste von kommentierten Links
Bedeutung von Listen aus kommentierten Links
Gelegentlich werden unterhalb eines Links Erläuterungen oder Kommentare zur Zielseite angegeben. Nach Möglichkeit sollten Link und Kommentar semantisch gruppiert werden.
Wird gleich eine Liste von solchen kommentierten Links angeboten, erachte ich es als naheliegend, diese Liste als Definitionsliste zu realisieren. Der Code könnte etwa folgendermaßen aussehen:
Technik für Listen aus kommentierten Links
Definitionsliste aus kommentierten Links
<nav
aria-label="Servicestelle">
<dl>
<dt>
<a href="aktuell.html">
Aktuelles
</a>
</dt>
<dd>
Veranstaltungen, Presseaussendungen und …<
/dd>
[…]
</dl>
</nav>
Erläuterungen zu diesem Code
- Da es sich um einen Bereich mit Navigationselementen handelt, wird er in das
nav
-Element eingebettet. - Damit dieser Navigationsbereich beim Auflisten von Seitenregionen von anderen Navigationsbereichen unterschieden werden kann, erhält er eine Beschriftung mittels des
aria-label
-Attributs. - Der Link wird als Term in das
dt
-Element eingebettet. - Erläuterungen oder Kommentare kommen in das
dd
-Element.

Verschachtelte Listen
Bedeutung verschachtelter Listen
Verschachtelte Listen sind solche, bei denen für einzelne Listenpunkte eine untergeordnete Liste eingefügt wurde. Sinnvoll können sie für ungeordnete und geordnete Listen eingesetzt werden.
Verschachtelungen sollten weithin vermieden werden. In einem Gesetzesartikel und Ähnlichem sind sie unterhalb eines Abschnitts oder Paragrafen wohl unvermeidlich.
Indikatoren für Aufzählungspunkte in verschachtelten Listen
Bei geordneten Listen werden vom Browser standardmäßig einzelne Aufzählungspunkte wiederum jeweils mit einer einzelnen Ziffer versehen. Es erscheint mir daher für die Übersichtlichkeit zweckmäßig, untergeordnete Listen mit einem anderen Indikator, etwa einem Kleinbuchstaben, zu versehen. Der Code könnte also etwa folgendermaßen aussehen:
Code
<ol>
<li>Als Menschen mit Behinderung gelten im Sinne dieses Gesetzes:
<ol style="list-style-type: lower-alpha;">
<li>Personen, die gehörlos sind.</li>
<li>[…]</li>
</ol>
</li>
<li>[…]</li>
</ol>
Ergebnis im Browser:
- Als Menschen mit Behinderung gelten im Sinne dieses Gesetzes:
- Personen, die gehörlos sind.
- […]
- […]
Screen Reader und verschachtelte Listen
Aus der Perspektive der Barrierefreiheit sind verschachtelte Listen zulässig, wenn die HTML-Syntax korrekt eingesetzt wird. Screen Reader geben dann jeweils die Verschachtelungsebene an.
Aus der Perspektive der Bedienbarkeit mit einem Screen Reader hingegen empfiehlt es sich, auf Verschachtelungen möglichst zu verzichten. Das übergeordnete Listenelement wird semantisch stattdessen als Überschrift formatiert und die verschachtelte Liste wird als einfache Liste unter die Überschrift gesetzt. Das bringt folgende Vorteile:
- Eine Navigation mittels Tastaturbefehlen ist zwischen übergeordneten Listenelementen nicht möglich, sehr wohl jedoch zwischen Überschriften.
- Die Verschachtelungsebene muss vom Screen Reader nicht angegeben werden, was semantische Zusatzinformationen bei der Wiedergabe reduziert.
- Bei der Wahrnehmung einer Liste wird deren Komplexität vereinfacht, wenn es keine verschachtelten Elemente gibt.

Indikatoren für Aufzählungspunkte mit Stylesheets festlegen
Bedeutung von Indikatoren für Aufzählungspunkte
Welcher Indikator für einen Aufzählungspunkt erscheint, wird ohne nähere Festlegung durch den Browser bestimmt. In der Regel sollte die Darstellung der einzelnen Punkte in einer Liste auch dem Browser überlassen werden.
Eine Definitionsliste wird üblicherweise vom Browser ohne Aufzählungsindikatoren versehen. Mir fällt auch kein Szenario ein, indem in einer Definitionsliste ein Aufzählungszeichen eingesetzt werden sollte. Visuell werden die einzelnen Elemente wohl besser durch Abstände und Einrücken abgegrenzt.
Technische Realisierung von Indikatoren für Aufzählungspunkte
Browser versehen ohne weiteres Zutun eine ungeordnete Liste mit einem Aufzählungspunkt (•) und eine geordnete Liste mit einer Nummerierung. Wer aus guten Gründen die Aufzählungspunkte vor den einzelnen Listenelementen abweichend vom Standard darstellen möchte, kann dafür die CSS-Eigenschaft list-style-type
verwenden.
Die verfügbaren Werte für die list-style-type
-Eigenschaft findet man im Web üblicherweise in einer Gesamtdarstellung. Praktisch werden sie jedoch zweckmäßigerweise jeweils nur für ungeordnete oder geordnete Listen eingesetzt.
Indikatoren für ungeordnete Listen (Auswahl)
disc
- Kleiner gefüllter Kreis (Standardwert)
circle
- Kleiner leerer Kreis
square
- Kleines gefülltes Quadrat
Indikatoren für geordnete Listen
decimal
- Dezimalzahlen beginnend bei 1 (Standardwert für geordnete Listen)
lower-alpha
/upper-alpha
- Alphabetische Nummerierung in Klein- oder Großbuchstaben.
lower-roman
/upper-roman
- Nummerierung mit lateinischen Ziffern in Klein- oder Großbuchstaben.
Die Eigenschaft ist eigentlich für Listenelemente vorgesehen. Da sie jedoch an Kindelemente vererbt wird, kann sie auch im übergeordneten <ul>
oder <ol>
-Tag eingefügt werden.
Aufzählungspunkte für Screen Reader optimieren
Implementierung von Listentypen durch Screen Reader
Die Umsetzung der Werte für die Eigenschaft list-style-type ist teilweise schon allein in Browsern wackelig. Werden darin doch auch Werte für Aufzählungszeichen in Sprachen festgelegt, die bei uns kaum gebräuchlich sind (georgisch, äthiopisch, koreanisch …).
Ich habe darüber hinaus Screen Reader für geordnete und ungeordnete Listen stichprobenartig getestet. Die Implementierung erscheint verblüffend unterschiedlich, was Kombinationen Browser, assistierender Technologie, Listentyp und Aufzählungsindikator betrifft. Mir ist bewusst, dass darüber auch die Implementierung von der jeweiligen Sprachausgabe abhängen kann.
HTML Code der Testdatei für list-style-type
(Textdatei)
Hier einige Ergebnisse der Tests mit den gängigsten Screen Reader für Desktop Applikationen, JAWS und NVDA in der 2019 aktuellen Version, mit dem Internet Explorer 11 (IE) und Mozilla Firefox 65 (MF):
- JAWS und NVDA erläutern die Art des Aufzählungspunktes für ungeordnete Listen in MF, nicht jedoch im IE.
- JAWS kennt griechische Buchstaben als Aufzählungspunkte (
list-style-type="lower-alpha"
) im MF, nicht jedoch im IE. - NVDA hingegen kennt auch im MF griechische Buchstaben als Aufzählungspunkte nicht.
Wortreiche Erläuterungen bei außergewöhnlichen Indikatoren
Einzelne Werte für den list-style-type
werden also von Screen Readern noch nicht korrekt interpretiert. Soweit ich sehe, wird stattdessen einfach ein Standardwert angenommen und schlicht jeweils Aufzählung
vor dem Text des Listenelements als Erläuterung angegeben.
Das gravierendere Problem bei der Nutzung von Screen Readern ist jedoch, wenn die Art des Indikators korrekt wiedergegeben wird. Der Wert square
für das Aufzählungszeichen kann etwa dazu führen, dass vor jedem Inhalt eines Listenelements folgende Erläuterung vom Screen Reader vorangestellt wird:
Schwarzes kleines bis mittelgroßes Quadrat.
Fazit: Sparsamer Einsatz von Listentypen
Aus der Perspektive der Nutzung von Screen Readern sollten also explizite Festlegungen des Aufzählungstyps nur nach gründlicher Reflexion verwendet werden. Folgende Erfahrungswerte sind dabei zu berücksichtigen:
- Bei geordneten Listen werden für den
list-style-type
neben dem Standardwertdecimal
die Wertelower-alpha
/upper-alpha
(alphabetische Nummerierung) undlower-roman
/uper-roman
(Nummerierung mit römischen Ziffern) sehr zuverlässig vom Screen Reader erkannt. Screen Reader geben den jeweiligen Indikator auch sehr sparsam mit Einzelbuchstaben oder Ziffern wieder. - Bei ungeordneten Listen sollte die Darstellung der Indikatoren für einzelne Listenelemente dem Browser überlassen werden. Dadurch wird sichergestellt, dass der Indikator überhaupt und nicht allzu wortreich erläutert wird.
Aufzählungszeichen ausblenden
Auch Navigationsbereiche bestehen aus einer Auflistung, und zwar von Links. Sie sollten daher auch in einem <ul>-Tag erscheinen. Ein Auflistungszeichen ist hierbei jedoch nicht wünschenswert. Für diese und ähnliche Situationen wird das Aufzählungszeichen technisch ausgeblendet. Der Code dafür kann etwa folgendermaßen aussehen:
<ul role="list" style="list-style-type: none;"> <li><a href="[...]">Aktuelles</a></li> […] </ul>
Gewöhnlich ist eine redundante Verwendung des HTML-Elements ( ul>
) und der entsprechenden ARIA-Anweisung (role="list"
) nicht erforderlich.
Diese Redundanz ist jedoch anzuwenden, damit Safari mit der CSS-Anweisung list-style-type:none
nicht auch gleich die Listensemantik entfernt. (Stand April 2023)

Listen für Screen Reader optimieren
Bedeutung von Überlegungen zur Nutzungsfreundlichkeit für Screen Reader
Damit Listen auch mit einem Screen Reader möglichst effizient erarbeitet werden können, müssen spezielle Useability-Überlegungen berücksichtigt werden. Es geht also hier um die Accessibility Experience (AX) in Anlehnung an die User Experience (UX), die Erfahrungen und das konkrete Erleben für das Design berücksichtigen.
Die Barrierefreiheit selbst ist gewährleistet, wenn Listen adäquat mit den entsprechenden HTML-Elementen versehen werden. Entscheidend ist dabei lediglich, die erforderliche Syntax für ungeordnete, geordnete und Definitionslisten einzuhalten.
Funktionalitäten von Screen Readern für Listen
Screen Reader lesen nicht nur vor, was am Bildschirm steht, sondern nützen beispielsweise die HTML-Semantik oder ARIA-Eigenschaften, um Navigationsmöglichkeiten oder Metainformationen zur Verfügung zu stellen.
Befehl | Auswirkung |
---|---|
L | Springe zur nächsten Liste. |
I | Springe zum nächsten Listenelement (Item). |
JAWS-Taste + STRG + L | Zeige eine Liste mit allen vorhandenen Listen. |
Beschriftung von Listen mittels ARIA
Der Inhalt einer Liste könnte mittels aria-label
im Wurzelelement der Liste explizit angegeben werden. Der Code für eine Obstliste würde etwa folgendermaßen aussehen:
<ul aria-label="Obst"> <li>Äpfel</li> […] </ul>
JAWS Verhalten bei Listen mit Label
Beginn und Ende der Liste sollte auf diese Weise samt Beschriftungstext vom Screen Reader angegeben werden, so wie etwa bei Seitenregionen. Leider übernimmt JAWS diese Implementation nicht.
Am Ende der Liste wird die Beschreibung nicht wiederholt. Möglicherweise sollte bei der Entwicklung auf möglichst sparsame Wiedergabe von Metainformationen geachtet werden. Ob dies auf Grund gezielter Tests bei der Benutzung erfolgte oder freihändig, weiß ich nicht. Wenn es dafür keine einschlägigen Konfigurationsmöglichkeiten gibt, würde ich dies jedenfalls als technische Bevormundung ansehen.
Die Auflistung aller Listen auf einer Webseite mit JAWS-Befehlen beschränkt sich in der Version 2018 jedenfalls nicht auf explizit vorhandene Beschriftungen, sondern gibt gleich auch den Text von Listenelementen wieder. Das riecht stark nach einem Bug. (Stand JAWS 2019)
Falls Sie gerade JAWS laufen haben, können Sie den oben erwähnten Shortcut verwenden, um das Verhalten zu testen. Diese von Ihnen gerade aufgerufene Webseite verfügt über etliche Listen, die alle mit einem Label versehen sind. Meines Erachtens sollte JAWS alleine die Beschriftungen auflisten.
Verschachtelte Listen und Nutzungsfreundlichkeit für Screen Reader
Die Problematik habe ich bereits erläutert. Nochmals kurz zusammengefasst: Vermeide möglichst verschachtelte Listen! verschachtelter Listen für Screen Reader
Aufzählungspunkte für Screen Reader optimieren
Die habe ich bereits erläutert. Sehen Sie sich mein Problematik von Aufzählungszeichen für Listen bei der Nutzung mit Screen ReadernFazit nochmals an.