Die Vielfalt von Listen in HTML

Montag, 29 Oktober 2007 23:13 MET

Thema:
Webgestaltung  
Stichworte:
, , , ,  
 
Screenshot HTML-Listen
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

  1. Listen, Listen und nochmals Listen
  2. Listen mit Überschrift zur Orientierung

Dieser Artikel ist ein Beitrag zur
Accessibility Blog-Parade 2007
Banner mit Aufschrift: Accessibility Blog Parade - 10.10. bis 11.11.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

  1. …
    • dann könnten wir vielleicht … und
    • ziemlich sicher …
  2. …

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:

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

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

  1. Definitionslisten
  2. ungeordnete und
  3. 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.

Listen mit Überschrift zur Orientierung

Wie schon vorhin angedeutet, eignen sich aber – vor allem ungeordnete – Listen hervorragend für Navigationsleisten. Im Zusammenspiel mit Überschriften, zur Einteilung von Navigations- und Orientierungsbereichen einer Webseite.

Ein HTML-Dokument sollte zur Orientierung auch Überschriften zu wichtigen Bereichen aufweisen (Navigation, weitere Links, Blogroll, et cetera). In diesen Bereichen befinden sich dann meist Listen.

Leider sieht HTML kein Überschriften-Element innerhalb einer Liste – vergleichbar mit dem Element <caption> in einer Tabelle – vor. Im Arbeitsentwurf zu HTML5 beziehungsweise XHTML2 ist ein solches Titel-Element für Listen vorgesehen.

Visueller Kontext ist noch lange kein semantischer

Durch Grafik und Gestaltung kann ich einen visuellen Kontext herstellen, der für sehende Menschen Bereiche voneinander abgrenzt. Digitale Verarbeitungsmechanismen können damit meist aber nichts anfangen.

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. Für die visuelle Aufbereitung kann solch eine Überschrift via Cascading Style Sheets (CSS) aus dem Sichtbereich gegebenenfalls entfernt werden.

Struktur der Überschriften muss zusammenpassen

Die Geister scheiden sich allerdings in der Art der Struktur.

Längerer Text, der bereits eine Überschriftenordnung beinhaltet, sollte demnach in die bereits vorhande Struktur von Überschriften einer Webseite logisch integriert werden.

Beginnt also der eigentliche Inhalt eines HTML-Dokuments mit der Überschrift zweiter Ordnung, kann ich den Text nicht unmittelbar hinter eine Navigationsleiste stellen, der eine Überschrift erster Ordnung voransteht. Das würde dem Inhalt die Bedeutung geben, dass er Teil der Navigationsliste wäre. Beginnt der Inhalt mit Überschrift erster Ordnung, wäre die Reihenfolge korrekt.

Häufige Vorgangsweise

Eine oft proklamierte Methode ist die Sichtweise, dass eine Webseite eben ein Dokument ist und mit einer H1-Überschrift beginnt. Meist also der Name oder das Logo, eingebettet in ein H1-Element.

Alle dahinter folgenden Abschnitte können also nur mit einer Überschrift zweiter Ebene beginnen. Es gibt also auf einer Webseite genau eine H1-Überschrift, alles andere reiht sich darunter.

Beispiel:

  1. H1 – Logo oder Name
    darunter folgt zum Beispiel gleich die Hauptnavigation, ohne eigene Überschrift
    1. H2 – Beginn des Inhalts (Beitrag)
      1. H3 – weitere Subüberschrift des Textes
      2. H3 – und so weiter
    2. H2 – Bereichsnavigation (darunter Liste)
    3. H2 – Weitere Navigationsliste
      1. H3 – Untergruppen
      2. H3 – Untergruppe

Diese Erstellung hat zwar Logik, kann aber vor allem im Zusammenspiel mit Content-Management Systemen (CMS) Probleme bringen.

In solchen Systemen bette ich in der Vorlage die erste Überschrift – also den obligatorischen Titel – eines Beitrages in ein Überschriften-Element meiner Wahl (H1, H2 oder H3). Für weitere Überschriften im Text sind allerdings die Verfasser der Beiträge zuständig. Hier muss der Entwickler entscheiden, ab welcher Ordnung Überschriften im Texteditor erlaubt sind. Diese Überschriften stehen dann als HTML in der Datenbank.

Spätestens bei Kopieren und Einfügen-Aktionen von anderen Programmen oder Im- und Exporten bei Systemänderungen, kommen die Hierarchien der Überschriften durcheinander. Abgesehen davon, dass sich die wenigsten um solchen Kram dann kümmern, ist diesem Problem nur mit guten Texteditoren (welche ich bis dato noch nicht gesehen habe) und einem Script beizukommen, welches die Einstufung der Überschriften dann automatisch anpasst.

Im folgenden Beispiel ist das genannte Problem mit den Überschriften etwas entschärft, da Inhalte mit H1 beginnen und diese Reihenfolge beim Kopieren von anderen HTML-Editoren eher die Standardeinstellung ist.

Weniger gesehen, aber auch korrekt

Christian Watson stellt in einem Artikel (Headings and Hierarchy: is More Than One H1 a Crowd?) auch die Frage, warum ein HTML-Dokument nur eine H1-Überschrift haben soll. Er sieht das Problem zwar nicht aus oben geschilderter Situation, aber seine semantische Argumentation ist durchaus auch meine.

Wir dürfen nicht vergessen, dass jedes Programm auch – und vor allem – den Titel (<title>) einer Webseite als erstes verwertet. Wird der Titel der einzelnen Seiten einer Website richtig aufbereitet, steht in diesem bereits immer der Name der Präsenz und in Unterseiten die Überschrift des Inhaltes.

Das obige Beispiel könnte also durchaus auch so aussehen:

  1. <title> – Logo oder Name und Titel des Beitrages
  2. H1 – Logo oder Name
    In diesem Kontext kann die Frage berechtigt sein, warum das Logo oder der Name dann überhaupt in einer H1-Überschrift am Anfang einer Webseite stehen soll.
  3. H1 – Beginn des Inhalts (Beitrag)
    1. H2 – weitere Subüberschrift des Textes
    2. H2 – und so weiter
  4. H1 – Bereichsnavigation (darunter Liste)
  5. H1 – Weitere Navigationsliste
    1. H2 – Untergruppen
    2. H2 – Untergruppe

Wie wir auch immer hier entscheiden, aus Sicht der Semantik ist die durchgehende Kontinuität der Überschriften-Hierarchie wichtig und leistet einen wesentlichen Anteil zur Zugänglichkeit von Web-Dokumenten.

Dieser Artikel ist ein Beitrag zur Accessibility Blog-Parade 2007.

Weitere Links zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 2. November 2007 auf Relevanz geprüft.

Datum:
veröffentlicht am 29 Oktober 2007, 23:13 MET.
Artikel:
Die Vielfalt von Listen in HTML [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/95
Thema:
Webgestaltung 
Stichworte:
, , , ,  
Reaktionen:
Bezugnahme 2

externe Bezugnahmen (2) ansehen

Dieser Artikel bezieht sich intern auf frühere Einträge:

Interne Bezugnahme von neueren Artikeln

  1. Webseite mit Überschriften strukturieren – eine Chronologie vom 29. Juni 2008
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Notiz: Neuer Firefox 2.0.0.9 behebt Darstellungsfehler
älterer Artikel »
Conditional-Comments für Internet Explorer im Beispiel