Die Vielfalt von Listen in HTML

Montag, 29 Oktober 2007 23:13 MET

Thema:: Webgestaltung
Stichworte:: barrierearm, benutzerfreundlich, Blogparaden, HTML, Webstandards

: Die Vielfalt von Listen in HTML [hyperkontext | Weblog]; Bezugnahme 2

Listen sind zur sehenden Übersicht sinnvoll. Noch viel mehr aber in ihrer Bedeutung (Semantik). Auch die sogenannte Tagcloud ist eine alphabetische Liste.

Im nichtvisuellen Kontext müssen Navigationsbereiche und Linklisten, die irgendwo im Raum eines HTML-Dokumentes angesiedelt sind, mit Hilfe eines Überschriften-Elementes ihren Zweck kommunizieren.

Abschnitte

Listen, Listen und nochmals Listen
Listen mit Überschrift zur Orientierung

gesamten Artikel auf einer Seite zeigen

Dieser Artikel ist ein Beitrag zur
Accessibility Blog-Parade 2007

Ich knüpfe mit diesem Text an meinen vorigen Artikel zur Blog-Parade an – von der Einsicht der Struktur zur Vielfalt der Ansichten (2).

Listen, Listen und nochmals Listen

Kreatives Chaos kann sehr sinnvoll sein, wenn Menschen durch eigene Handlungen und Gedanken Prozesse initiieren und dadurch selbst Teil des Chaos werden.

Liste leitet sich – über den lateinischen Umweg Lista – aus dem germanischen Leiste ab. Und dort hatte dies bereits die Bedeutung von Streifen, Verzeichnis.

Nichtbeteiligte können aber ein Chaos nicht verstehen. Daher müssen eventuelle Erkenntnisse und Informationen aus einem Chaosprozess in geordneter und nachvollziehbarer Form nach außen weitergegeben werden. Deswegen gibt es Fahrpläne, Einkaufslisten, Terminkalender, Agendas, Ergebnislisten, Checklisten, und so weiter.

Listen sind zur sehenden Übersicht sinnvoll. Noch viel mehr aber in ihrer Bedeutung (Semantik). In einem Telefongespräch unterstreichen wir oftmals bedeutungsvolle oder logische Aussagen auch verbal in Listenform.

Beispiel:

Hör mal zu. Wir sollten

…

dann könnten wir vielleicht … und

ziemlich sicher …

…

Diese Auszeichnung unterstreicht die Bedeutung, dass es sich hier um besondere Schritte oder Abfolgen handelt. Ein Programm das Texte analysieren soll kann also nur Textauszeichnungen erkennen, um daraus Erkenntnisse zu gewinnen.

So stellt also ein visuelles Ausgaberät obiges Beispiel in einer Listenform dar. Wenn Sie gerade ein Sprachausgabegerät verwenden, wird selbiges Beispiel wohl in einer ähnlichen Art vorgelesen worden sein, wie ich es Ihnen mündlich erklärt hätte. Andere Programme, soweit sie darauf optimiert sind, werden die obige Textstelle auch in einer besonderen Art erfassen.

Hätte ich das Beispiel oben nicht extra in einer Liste aufgezählt,

würde ein Sprachausgabegerät die Textstelle in einer Leier herunterlesen. Nur der interpretierende Mensch dahinter kann die Textstelle so verstehen, wie sie gemeint ist.
könnte ein Programm keine besondere Bedeutung ableiten und später nie in einen eventuellen Zusammenhang mit anderen Texten bringen.
ist dieser Text für eine Suchmaschine nur eine Anreihung von Zeichen. Je nach Auswertungsart und Qualität der Suchmaschine, kann eine ausgezeichnete Liste aber sehr wohl Bedeutung haben.

Welche Art der folgenden Navigationsleiste ist wohl die bedeutungsvollere?

Beispiel 1:

Beispiel 2:

Menüpunkt A
Menüpunkt B
Menüpunkt C
Menüpunkt D
Menüpunkt E

Sie sehen keinen Unterschied? Gut so.

Die Gestaltung von Listen mittels CSS muss mittlerweile das grundlegende Handwerk jedes ernsthaften Webgestalters sein.

Beispiel 2 erfassen alle Programme, inklusive Ihres visuellen Browsers, als Liste. Ich habe lediglich die visuelle Ausgabe mit CSS (Cascading Style Sheets) zu einer horizontalen Leiste angepasst und die Trennstriche sind nur optisch sichtbar.

Jeder Menüpunkt ist ein eigener Listenpunkt. Somit können die einzelnen Punkte mit Hilfe assistiver Programme auch an- beziehungsweise übersprungen werden. Damit geben wir der Navigationsleiste aus Beispiel 2 eine Bedeutung als solche. Wenn diese noch mit einer Überschrift gekennzeichnet ist, umso besser.
Beispiel 1 würde von einem Screen-Reader etwa so vorgelesen werden: Menüpunkt A senkrechter Trennstrich Menüpunkt B senkrechter Trennstrich und so weiter. In dieser Art wird dies auch von jeglichen anderen Programmen interpretiert.

Die Antwort, welches der beiden Beispiele logischer und zugänglicher ist, ergibt sich wohl von selbst.

Traurigerweise ist aber Beispiel 1 mehrheitlich immer noch gängige Praxis! Und oft noch schlimmer, nämlich in – semantisch bedeutungslose – Tabellenzellen eingepfercht.

Wie wir also erkennen können, sind Listen nicht nur innerhalb von Texten vorteilhaft, sondern dienen auch dem gesamten HTML-Dokument zur Einteilung. Und derer gibt es viele.

HTML kennt drei Arten von Listen

Definitionslisten
ungeordnete und
geordnete Listen

Definitionslisten

Die Definitionsliste ist die eher selten angewandte Form. Es gibt jeweils einen Definition Term (<dt>) und eine oder mehrere Definition Description (<dd>).


<dl>
  <dt>[Definition Term1]</dt>
      <dd>[Definition Description]</dd>
      <dd>[Definition Description]</dd>
  <dt>[Definition Term2]</dt>
   <dd>[Definition Description]</dd>
</dl>

In der HTML-Rohfassung wird solch eine Liste meist so aussehen:

CSS: Cascading Style Sheets; Closed Source Software; Central Security Service (Abteilung des Geheimdienstes der Vereinigten Staaten)
HTML: Hypertext Markup Language

Hier sehen wir den klassischen Anwendungsfall einer Definitionsliste. Wie diese sonst noch eingesetzt werden können, ist Interpretationssache und wird seit Jahren diskutiert. Manche verwenden sie sogar für Fotogalerien und den Bildbeschreibungen hierzu.

Ich verwende eine Definitionsliste zum Beispiel in diesem Blog im Informationskasten am Ende jedes Artikels. Für mich ist das der typische Wer, Wie, Wo Fall, der sich regelmäßig wiederholt. Ohne CSS sieht der visuelle Infokasten also so aus:

Datum:: veröffentlicht am …
Artikel:: Titel des Artikels
Thema:: Thema1, Thema2
Stichworte:: Stichwort1, Stichwort2, Stichwort3
Kommentarfeed:: RSS 2.0
Sonstige Infos:: Kommentare

Für Programme ist dies auf jeden Fall sinnvoller zu erfassen und wäre in bestimmten Auswertungssituationen sogar vergleichbar mit anderen Artikeln. Benutzer eines assistiven Ausgabegerätes können schnell von einer Definition zur nächsten springen und sich nur die Beschreibungen auswerten lassen, die sie interessieren.

Der Einsatz der Definitionsliste in diesem speziellen Fall, lässt sich natürlich diskutieren.

Geordnete und ungeordnete Listen

Geordnete Listen sollten vor allem dann eingesetzt werden, wenn es sich um eine tatsächliche Reihenfolge handelt. Mit CSS lassen sich auch römische Zahlen oder alphabetische Punkte in Groß- oder Kleinschreibung einsetzen. Variationsmöglichkeiten existieren hier genug, allerdings werden nicht alle von jedem Browser unterstützt.

Die ungeordnete Liste ist die wohl am häufigsten anzuwendende Art. Wenn wir in einem Text eine Aufzählung von Punkten haben, dann sollten wir dieses dafür geschaffene HTML-Element auch einsetzen. Es dient nicht nur der optischen Auflockerung, sondern ist eine willkommene Gelegenheit, Textpassagen logische Bedeutung zu geben.

Auch eine Tagcloud ist eine Liste

Tagcloud – zu Deutsch (Stich), (Schlag)Wortwolke – ist erst einmal eine normale alphabetische Liste von Schlagwörtern (zu Neudeutsch Tags) mit jeweils einem Link unterlegt, der zur Auflistung aller unter diesem Wort abgelegten Blog-Einträge führt.

Die Anzahl der Artikel die sich hinter dem Schlagwort verbirgt, wird mit der Schriftgröße, welche prozentual aus der Spanne zwischen wenigsten und meisten Einträgen errechnet wird, angezeigt.

Durch die Anreihung von vielen solcher Schlag-, Stichwörter in verschiedenen Größen, ergibt sich für einen sehenden Benutzer auf einen Blick ein Bild, unter welchen Wörtern sehr viele Einträge abgelegt wurden und hinter welchen Wörtern sich nur wenige verbergen. Über Sinn und Unsinn solcher Auflistungen lässt sich streiten.

Wenn Tagclouds eine Auflistung sind, warum werden sie nicht in einer Liste geführt?

In sehr vielen Anwendungsfällen besteht diese Liste (ja, es ist eine alphabetische Liste) allerdings schlicht aus der Aneinanderreihung der Wörter; oft sogar ohne Beistrich oder sonstigen semantischen Trennungsmethoden.

Wir können uns vorstellen, dass sich für Programme, deren Zweck nicht die visuelle Aufbereitung ist, die semantische Aussagekraft solcher Gebilde nicht erschließt.

Will ich also einem nicht sehenden Benutzer oder einem Programm den Zweck dieser Auflistung verdeutlichen, müsste diese Liste etwa so aussehen:

Auto – 5 Einträge
Baum – 2 Einträge
Brücke – 10 Einträge
Fluss – 6 Einträge
Straße – 12 Einträge

Sieht doch schon einmal logisch aus, oder? Ich kann also eine alphabetische Liste erkennen, welche nach jedem einzelnen Punkt die Anzahl der Artikel anzeigt.

Damit die Liste mehr Bedeutung bekommt, können wir dem Script eine Regel verpassen, die alle Listenpunkte welche mehr als 50% der Einträge aus der Spanne zwischen wenigsten und meisten hat, mit einem Element <strong> versehen.

Die vorige Liste würde dann so aussehen:

Auto – 5 Einträge
Baum – 2 Einträge
Brücke – 10 Einträge
Fluss – 6 Einträge
Straße – 12 Einträge

Somit kann jedes vernünftige Programm – durch das Element <strong> – erkennen, dass Brücke und Fluss innerhalb dieser Liste eine höhere Gewichtung einnehmen.

Das Beispiel einer solchen Liste mit CSS als Wortwolke aufbereitet, sehen Sie unter Suche.

Die Liste wird zur Tagcloud

Da wir nun eine Liste haben, die für viele digitale Verarbeitungsschritte Bedeutung hat, steht es uns frei, aus dieser Auflistung mit den Werkzeugen von CSS eine visuelle Wortwolke zu generieren. Ein CSS-Tutorial ist aber nicht der Zweck dieses Artikels.

Abschnitte dieses Artikels: