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.

Abbildung: Unsortierte und sortierte Liste
Nr.EigenschaftBeschreibungKlassifizierungReferenz
374KontrastDer Textinhalt der Listeneinträge muss zum Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.

Hinweis: Dies gilt bei sortierten Listen auch für die Aufzählungszeichen, sofern diese eine Information vermitteln (z. B. eine Zahl oder einen Buchstaben enthalten).

MussEN 301 549:
9.1.4.3, 11.1.4.11
375KontrastSind die Listeneinträge ausschließlich aufgrund ihrer farblichen Gestaltung als solche zu erkennen, muss diese Farbe zu benachbarten Farben ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Hinweis 1: Ein Listeneintrag kann z. B. aufgrund seines Aufzählungszeichens oder seiner Hintergrundfarbe als solcher erkennbar sein.

Hinweis 2: Die Anforderung gilt nicht, wenn die Listeneinträge z. B. aufgrund der Abstände untereinander eindeutig als solche zu erkennen sind.

MussEN 301 549:
9.1.4.11, 11.1.4.11
376KontrastDie grafischen Inhalte der Listeneinträge müssen muss zum Hintergrund ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Hinweis: Dies gilt bei sortierten Listen auch für die grafischen Aufzählungszeichen, sofern diese eine Information vermitteln.

MussEN 301 549:
9.1.4.11, 11.1.4.11
377VergrößerungKein Listeneintrag darf bei 400% Zoom breiter als 320 px sein, damit deren Inhalte ohne horizontales Scrollen wahrnehmbar sind.MussEN 301 549:
9.1.4.10, 11.1.4.10
378HierarchieWenn die Liste verschachtelte Listen enthält, soll die Hierarchie deutlich sichtbar sein.

Hinweis: Verschachtelte Listen werden meist durch Einrückung dargestellt. Darüber hinaus können je nach Hierarchie-Ebene unterschiedliche Aufzählungszeichen verwendet werden.

SollDIN EN ISO 9241-125: 6.1.2
379FokussichtbarkeitErhält ein Listeneintrag oder ein Element in diesem den Tastaturfokus, dann muss der Fokusindikator sichtbar sein (siehe Fokusindikator).MussEN 301 549:
9.2.4.7, 11.2.4.7
Nr.EigenschaftBeschreibungKlassifizierungReferenz
380TastaturbedienungAlle Bedienelemente innerhalb der Liste müssen mit der Tastatur erreicht, bedient und verlassen werden können (siehe folgende Tabelle Tastaturbedienung).MussEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
381KlickbereichDer Klickbereich der Bedienelemente innerhalb der Liste soll mindestens 24 x 24 px betragen (siehe Zeigeinstrumentbedienung).SollWCAG 2.2

Tastaturbedienung Liste (in einer Anwendung, die den virtuellen Cursor unterstützt)

Permalink zu "Tastaturbedienung Liste (in einer Anwendung, die den virtuellen Cursor unterstützt)"

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.

AktionTasteKlassifizierung
Fokussieren interaktiver Elemente in der ListeTABErforderlich
Verlassen interaktiver Elemente in der ListeTABErforderlich
Bedienung interaktiver Elemente in der ListeEntsprechend des jeweiligen ElementsErforderlich

Tastaturbedienung Liste (in einer Anwendung, die den virtuellen Cursor nicht unterstützt)

Permalink zu "Tastaturbedienung Liste (in einer Anwendung, die den virtuellen Cursor nicht unterstützt)"

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.

AktionTasteKlassifizierung
Fokussieren der Liste (erster bzw. zuletzt fokussierter Listeneintrag)TABErforderlich
Verlassen der ListeTABErforderlich
Zellenweise Navigation innerhalb der Tabelle im NavigationsmodusPFEIL AUF/ABErforderlich
Schnellnavigation (zum ersten bzw. letzten Listeneintrag)POS 1, ENDEEmpfohlen
Schnellnavigation (mit einer fest definierten Schrittweite)BILD AUF/AB

Hinweis: Die Schrittweite soll mit der Anzahl der sichtbaren Listeneinträge übereinstimmen.

Empfohlen

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.

AktionTasteKlassifizierung
Bedienung interaktiver ElementeEntsprechend des jeweiligen ElementsErforderlich
Nr.EigenschaftBeschreibungKlassifizierungReferenz
382RolleDie Rollen (sortierte bzw. unsortierte) Liste und Listeneintrag müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.1.3.1, 11.1.3.1, 9.4.1.2, 11.4.1.2, 11.5.2.5
383RolleDie Rollen Liste und Listeneintrag dürfen nur für Listen verwendet werden. Layoutlisten, die lediglich der visuellen Gestaltung und nicht der Anzeige strukturierter Daten dienen, dürfen nicht mit diesen Rollen ausgezeichnet werden.MussEN 301 549: 9.1.3.1, 11.1.3.1
384NameSofern die Liste eine Beschriftung oder Beschreibung besitzt, müssen diese als Accessible Name bzw. Accessible Description übermittelt werden (siehe Beschriftung und Beschreibung).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
385BedienungDie Liste bzw. die darin enthaltenen interaktiven Elemente müssen mit Assistenztechnologie erreicht, bedient und verlassen werden können (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
386AktualisierungAktualisierungen hinsichtlich der Listeninhalte müssen an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
387Desktop: PositionGröße und Position der Listeneinträge und der darin befindlichen interaktiven Elemente müssen an die Accessibility API übermittelt werden (siehe Fokusindikator).MussEN 301 549: 11.5.2.5, 11.5.2.13
388ElementhierarchieDie Eltern-Kind-Beziehungen der Elemente innerhalb der Liste müssen an die Accessibility API übermittelt werden.

Hinweis 1: Die Assistenztechnologie benötigt diese Informationen, um u. a. die Anzahl der Listeneinträge, deren Position innerhalb der Liste und die Hierarchie verschachtelter Listen ermitteln zu können.

Hinweis 2: So ist es nicht zulässig, dass eine Liste programmatisch in verschiedene Listen aufgeteilt wird.

MussEN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.9
389AufzählungszeichenDas Aufzählungszeichen muss an die Accessibility API übermittelt werden (siehe Accessibility API).MussEN 301 549: 9.1.3.1, 11.1.3.1

Praxistipp Listen in Web-Anwendungen

Permalink zu "Praxistipp Listen in Web-Anwendungen"

Screenreader-Ausgabe von sortierten und unsortierten Listen

Permalink zu "Screenreader-Ausgabe von sortierten und unsortierten Listen"

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