Liste

Synonyme: List

Siehe auch: Auswahlliste, Baumstruktur, Tabelle

Eine Liste dient der strukturierten Anzeige von Daten. Eine Liste enthält mehrere Listeneinträge. Listen können sortiert oder unsortiert sein. Listen können ineinander verschachtelt sein. Häufig besitzen Listen einen visuellen Indikator am Beginn jedes Listeneintrags, ein sogenanntes Aufzählungszeichen, z. B.

• einen Anstrich oder ein Icon für eine unsortierte Liste
• einen Buchstaben oder eine Zahl für eine sortierte Liste.

Listeneinträge können Bedienelemente enthalten.

Bei Anwendungen, die den virtuellen Cursor unterstützen, erhalten die Liste und deren Listeneinträge nicht den Tastaturfokus. Lediglich interaktive Elemente innerhalb der Listeneinträge sollen mit der Tastatur erreicht und bedient werden können.

Bei Anwendungen, die den virtuellen Cursor nicht unterstützen, muss jeder Listeneintrag den Fokus erhalten können, damit deren Inhalte mit Assistenztechnologie (z. B. Screenreader) wahrnehmbar sind.

Hinweis: In den Programmiersprachen für Software gibt es häufig kein Element für Listen. Stattdessen werden für unverschachtelte Listen Auswahllisten und für verschachtelte Listen Baumstrukturen verwendet. In diesem Fall soll die Auswahlliste bzw. Baumstruktur in der Beschriftung oder Beschreibung einen Hinweis enthalten, dass sie nur der Darstellung von Inhalten und nicht der Auswahl dient.

Mit dem virtuellen Cursor:

• JAWS:
  • Liste mit [Anzahl] Einträgen (Verschachtelung [Ebene])
  • [Aufzählungszeichen] [Listeneintrag]
  • Listenende (Verschachtelung [Ebene])
• NVDA:
  • Liste mit [Anzahl] Einträgen
  • [Aufzählungszeichen] [Listeneintrag]
  • außerhalb von Liste
• Windows Sprachausgabe:
  • Liste öffnen
  • [Position] von [Anzahl] Ebene [Ebene] [Aufzählungszeichen] [Listeneintrag]
  • Liste schließen

Hinweis: Die Windows-Sprachausgabe gibt aufgrund des impliziten bzw. expliziten aria-level bei jedem Listeneintrag fälschlicherweise „Überschriftenebene [Zahl]“ aus.

Unsortierte Listen werden mit <ul> und <li> ausgezeichnet. Für Bedienelemente, die sich in einer Liste befinden, kann anstelle von<ul> auch <menu> verwendet werden. Das <menu>-Element wird mit der Semantik des <ul>-Elements an die Accessibility API übermittelt.

Sortierte Listen werden mit <ol> und <li> ausgezeichnet. Bei sortierten Listen kann der Startwert mit start angegeben, die Richtung mit reversed geändert und der Typ des Aufzählungszeichens mit type festgelegt werden.
Verschachtelte Listen werden umgesetzt, indem eine Liste (<ol> oder <ul>) sich innerhalb eines <li>-Elements der übergeordneten Liste befindet.

Der Unterschied zwischen einer sortierten und unsortierten Liste, d. h. zwischen <ol> und <ul>, ist visuell und mit Assistenztechnologie nur anhand der Aufzählungszeichen zu erkennen. Somit sollten die Aufzählungszeichen mit dem Listentyp übereinstimmen.

Es sollten einfache Aufzählungszeichen wie disc für unsortierte Listen oder decimal bzw. lower-latin für sortierte Listen gewählt werden, um die korrekte Ausgabe zu gewährleisten und nicht unnötig zu verlängern. Die folgenden beispielhaften Werte der CSS-Eigenschaft list-style-type werden von den Screenreadern JAWS (erster Eintrag), NVDA (zweiter Eintrag, sofern abweichend) und der Windows Sprachausgabe (dritter Eintrag, sofern abweichend) wie folgt ausgegeben:

• none: [keine Ausgabe]
• disc: Aufzählungszeichen
• circle: rundes hohles Aufzählungszeichen / weißes Aufzählungszeichen / leeres Aufzählungszeichen
• square: schwarzes Quadrat / großes gefülltes schwarzes Quadrat / [keine Ausgabe]
• disclosure-open: schwarzes nach unten zeigendes kleines Dreieck / schwarzes nach unten weisendes kleines Dreieck / [keine Ausgabe]
• disclosure-closed: gefülltes kleines Dreieck nach rechts / schwarzes nach rechts weisendes kleines Dreieck / [keine Ausgabe]
• decimal: [Zahl]
• lower-roman: [Zahl; bei Zahlen, die aus einem Buchstaben bestehen, nur der Buchstabe; bei Zahlen, die aus vielen Buchstaben bestehen, die Buchstaben einzeln oder als Wort] / [Zahl; bei Zahlen, die aus vielen Buchstaben bestehen, die einzelnen Buchstaben] / [Zahl; bei Zahlen, die aus vielen Buchstaben bestehen, die Buchstaben als Wort]
• lower-latin: [Buchstabe]
• lower-greek: [Buchstabe mit Zusatz „griechischer Kleinbuchstabe“] / [keine Ausgabe] / [keine Ausgabe]
• georgian: [keine Ausgabe]

Listenzeichen mit list-style-image werden von JAWS und NVDA nicht und von der Windows Sprachausgabe als „Bild“ (ohne Alternativtext) ausgegeben.

Weitere Informationen: 4.4.5 The ol element - HTML Standard (whatwg.org) (Externer Link), 4.4.6 The ul element - HTML Standard (whatwg.org) (Externer Link), 4.4.7 The menu element - HTML Standard (whatwg.org) (Externer Link), 4.4.8 The li element - HTML Standard (whatwg.org) (Externer Link)

Wird die Liste nicht mit dem HTML-Element umgesetzt, sollte u. a. Folgendes beachtet werden:

• Die Rolle der Liste wird mit role=list übermittelt.
• Die Rolle der Listeneinträge wird mit role=listitem übermittelt.
• Verschachtelte Listen können gemäß ARIA-Spezifikation mit aria-level umgesetzt werden. Dies wird allerdings nur von der Windows Sprachausgabe korrekt ausgegeben. Damit die Ausgabe von verschachtelten Listen auch durch JAWS und NVDA korrekt erfolgen kann, sollten verschachtelte Listen im Quellcode korrekt verschachtelt werden (Beispiel: <div role=list><div role=listitem>Eintrag 1<div role=list><div role=listitem>Eintrag 1.1 …).

Weitere Informationen: list role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (Externer Link)

Informationen zu diesem Artikel

Datum:

5.10.2023

Lizenz:

CC-BY-SA 4.0

Version:

0.5

Gerne können Sie uns Feedback per E-Mail zu unserer Handreichung senden!