Es gibt einen Grund, warum die meisten JavaScript-Frameworks und -Bibliotheken eine „Todo“-App verwenden, um ihre Demo-Apps zu präsentieren: Menschen lieben Listen! Nun, die meisten tun es. Listen sind insofern großartig, als sie dazu beitragen, Inhalten eine sinnvolle Struktur zu geben und den Lesern dabei helfen, sich darauf zu konzentrieren, wie viele Punkte von der Gesamtzahl möglicher Elemente übrig bleiben.
Aus demselben Grund hilft die Verwendung von HTML-Listenelementen im richtigen Kontext allen Benutzern, Inhalte zu konsumieren. Benutzer von Screenreadern haben zusätzliche Vorteile, da beim Auffinden einer Liste die Gesamtzahl der Elemente angesagt wird. Damit kann der Benutzer wählen, ob er die Listenelemente weiter durchsuchen oder die Liste vollständig überspringen möchte.
Arten von Listeninhalten
Welche Arten von Inhalten können als Liste betrachtet werden? Typischerweise besteht eine Liste aus einer Gruppierung zusammengehöriger Inhaltselemente, die in der Regel kurz gefasst sind. Hier sind einige Beispiele für gültige Listeninhalte:
- Seitennavigation
- Breadcrumb-Navigation
- Social-Media-Links
- Blog-Listing-Seite
- Kommentare zu Blogbeiträgen
- Sammlungsliste
- Fehlerliste
- Produktliste
- Zugehörige Kontrollkästchen-Steuerelemente
Es gibt noch mehr Beispiele, die in diese Liste aufgenommen werden könnten, aber die Idee, die Sie im Hinterkopf behalten sollten, ist, wenn Inhalt aus einer Gruppierung verwandter Elemente besteht, sollte es wahrscheinlich eine Liste sein. Bleibt die Frage, welches Listenelement verwendet werden soll?
Elemente auflisten
Es gibt drei verschiedene Arten von Listenelementen in HTML. Jede hat ihre eigene semantische Bedeutung und ihre angemessene Verwendung trägt wesentlich dazu bei, Ihren Inhalten eine Bedeutung zu verleihen.
Hier ist jeweils eine kurze Übersicht:
- Ungeordnete Liste ,
ul; Eine Auflistung verwandter Inhalte ohne bestimmte Reihenfolge. Verwenden Sie diese Option, um Struktur und Bedeutung mit Navigation, Blog-Listing-Seite, Karussellpfeil-Steuerelementen usw. hinzuzufügen. - Geordnete Liste ,
ol; Eine Auflistung verwandter Inhalte, die von einer bestimmten Reihenfolge abhängt. Verwenden Sie diese Option, um Checklisten, Karussellelementen und Aufzählungszeichensteuerungen usw. Bedeutung hinzuzufügen. - Beschreibungsliste ,
dl; Eine Auflistung zusammengehöriger Inhaltspaare. Verwenden Sie diese Option, um bei der Definition von Terminologie, einer FAQ-Liste, der Ausgabe von regulären/Sonderpreisen usw. Bedeutung hinzuzufügen.
WCAG-Erfolgskriterien
Dies kommt auf 1.3.1 Info und Beziehungen zurück, wo es heißt:
"Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch bestimmt werden oder sind in Textform verfügbar."