Zweiter Blick: Listen

BarrierefreiheitDarstellungsoptionen

Symbolgrafik Listen

Listen barrierefrei und benutzerfreundlich

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 Arten von Listen. Der Code dafür sieht auszugsweise folgendermaßen aus:

<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>

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:

  1. Als Menschen mit Behinderung gelten im Sinne dieses Gesetzes:
    1. Personen, die gehörlos sind.
    2. […]
  2. […]

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.

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 Standardwert decimal die Werte lower-alpha / upper-alpha (alphabetische Nummerierung) und lower-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 style="list-style-type: none;">
  <li><a href="[...]">Aktuelles</a></li>
  […]
</ul>

Listen für Screen Reader optimieren

Bedeutung von Überlegungen zur Benutzerfreundlichkeit für Screen Reader

Damit Listen auch mit einem Screen Reader möglichst effizient erarbeitet werden können, müssen spezielle Usability-Ü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.

JAWS Befehle für Listen
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 Benutzerfreundlichkeit für Screen Reader

Die Problematik verschachtelter Listen für Screen Reader habe ich bereits erläutert. Nochmals kurz zusammengefasst: Vermeide möglichst verschachtelte Listen!

Aufzählungspunkte für Screen Reader optimieren

Die Problematik von Aufzählungszeichen für Listen bei der Nutzung mit Screen Readern habe ich bereits erläutert. Sehen Sie sich mein Fazit nochmals an.