10.03.09

Pro/Contra-Listen

Menschen lieben Listen und Tabellen, denn sie bieten einen schnellen Überblick und sind meist schön anzusehen.

Eine der beliebtesten Arten von Listen sind solche, die negative und positive Aspekte aufwiegen. Pro und Contra, Für und Wider, Top oder Flop, Dos and Don’ts. Wenn ich mir einen Testbericht zu einem MP3-Player anschaue, bin ich immer froh, wenn solch eine Liste geboten wird. Innerhalb kürzester Zeit ist mein Entschluss gefasst. Die gute Klangqualität lässt das hässliche Design und die durchschnittliche Akkulaufzeit verschmerzen.

Darüber hinaus wecken solche Listen auch das Interesse des Lesers. Wenn ich mir trotz dieser zusammengefassten Punkte noch keine Meinung bilden konnte, lese ich mir den Testbericht etwas genauer durch, um mehr zu erfahren.

Solche tollen Listen sinnvoll in ein HTML-Dokument zu implementieren, gestaltet sich jedoch nicht so einfach. Im Folgenden gehe ich auf vier verschiedene Möglichkeiten ein.

Einführung

Es gibt in HTML drei Listen-Arten: numerierte, Aufzählungs- und Definitionslisten.

Im Voraus möchte ich ein paar Probleme erläutern und diese dann im Laufe des Essays wieder aufgreifen:

Aussehen
Natürlich sollen unsere Listen schön aussehen.
Screenreaderfreundlichkeit
Accessibility ist ganz wichtig und wenn für den Leser nicht klar ist, ob es sich gerade um einen Pro- oder Contra-Aspekt handelt, erreichen wir genau das Gegenteil des Gewollten.
»Bilder aus«-Problematik
Die Problematik mit fehlenden Bildern, beispielsweise mit Textbrowsern.
Markup
Wir wollen unser HTML so sauber wie möglich halten. Das bedeutet, keine unnützen Elemente.
Semantik
Zusammenhängendes soll semantisch zusammenhängen.
Erweiterbarkeit
Es gibt viele Arten von Gegenüberstellungen (Vor- und Nachteile, Haben und Nicht-Haben …). Deshalb sollten die Listen in dieser Hinsicht einfach zu verändern und zu erweitern sein.
Mischung
Manchmal möchte man die Argumente mischen, um z.B. die Zeit oder logische Folgerungen als Faktoren mit einfließen zu lassen.
Copy’n‘Paste
Die Liste soll kopierbar sein, ohne dass dabei der Zusammenhang kaputt geht.

Im Laufe meiner Versuche habe ich vier verschiedene Methoden ausgearbeitet, alle mit ihren eigenen Vor- und Nachteilen.

Methode 1: Getrennte ungeordnete Listen

Bei dieser Methode benutzen wir zwei Listen anstatt einer. Eine Liste bekommt eine Klasse »positive« und die andere die Klasse »negative«. Als Kopfzeile wären legend-Elemente innerhalb der ul-Tags ideal; leider sind diese nur in Formularen erlaubt. Gegen die Spezifikationen zu verstoßen ist keine Lösung – auch wenn es hier noch so gerechtfertigt zu sein scheint.

Wir müssen also mit einem anderen Element (außerhalb von ul) als Beschriftung vorlieb nehmen. Am besten ist es, wir nehmen einfach das nächstniedrigere Überschriftenelement.

Beispiel
<h3>Pro-Argumente</h3>
<ul class="positive">
  <li>Pro-Argument 1</li>
  <li>Pro-Argument 2</li>
  <li>Pro-Argument 3</li>
</ul>

<h3>Contra-Argumente</h3>
<ul class="negative">
  <li>Contra-Argument 1</li>
  <li>Contra-Argument 2</li>
  <li>Contra-Argument 3</li>
</ul>

Und im CSS definieren wir dann folgendes:

.positive  {
    list-style-image: url(positive.png);
}

.negative  {
    list-style-image: url(negative.png);
}

Hier wird einfach eine Listengrafik definiert. Für positive wäre dieses Bild zum Beispiel ein Plus-Zeichen.

Ein großer Vorteil dieser Methode ist die Skalierbarkeit. Man kann den ul-Tags mehrere Klassen zuweisen um somit beispielsweise andere Ergebnisse in der Darstellung zu erzielen.

<h3>Pro-Argumente</h3>
<ul class="positive thumb">
  <li>Pro-Argument 1</li>
  <li>Pro-Argument 2</li>
  <li>Pro-Argument 3</li>
</ul>

<h3>Contra-Argumente</h3>
<ul class="negative thumb">
  <li>Contra-Argument 1</li>
  <li>Contra-Argument 2</li>
  <li>Contra-Argument 3</li>
</ul>

Im CSS sprechen wir das dann wie folgt an:

.positive  {
    /* Default-Einstellungen für die positive-Klasse */
}

.negative  {
    /* Default-Einstellungen für die negative-Klasse */
}

.positive.thumb  {
    /* Hier kann man beispielsweise ein grünes »thumbs up«-Bildchen als Listengrafik definieren */
    list-style-type: url(thumbs-up.png);
}

.negative.thumb  {
    /* Hier kann man beispielsweise ein rotes »thumbs down«-Bildchen als Listengrafik definieren */
    list-style-type: url(thumbs-down.png);
}

Der Nachteil dabei ist jedoch, dass diese Art der Selektierung vom Internet Explorer der Version 6 oder darunter nicht unterstützt wird.


Anmerkung: Es gibt noch eine tricky Variante, um auch dem IE austauschbare Bildchen zu verpassen. Anstatt mit Listengrafiken wird dabei mit Hintergrundbildern und deren Verschiebung herumhantiert. Das würde aber den Rahmen dieses Essays sprengen. Deshalb verweise ich für Interessierte auf den Artikel CSS Sprites: Image Slicing’s Kiss of Death von Dave Shea.

Vor- und Nachteile der Methode demonstriere ich am besten in einer Pro/Contra-Liste, die sich genau dieser Methode bedient.

Vorteile
  • Screenreaderfreundlich
  • Erweiterbarkeit
  • Aussehen
  • »Bilder aus«-Problematik ist umschifft durch die Überschriften.
  • kein »Copy’n‘Paste«-Problem
Nachteile
  • Markup und Semantik: Die Überschriften sind in ihrer Zugehörigkeit nicht wirklich eindeutig. Wenn man sie weg lässt, tritt das Problem mit der Accessibility wieder auf.
  • keine Mischung der Argumente möglich
  • Zwei Listen. Die Zugehörigkeit wird auch hier nur durch die textliche Abfolge klar.

Methode 2: Ungeordnete Liste mit title

Eine leicht abgewandelte Form der ersten Methode. Man kann die Argumente mischen und ist (theoretisch) nicht auf Überschriften oder sonstige externe Bezeichner angewiesen. Außerdem liegt nur eine einzige Liste vor.

Zu den li-Elementen schreibt man in das title-Attribut jeweils, ob es sich um ein positives oder negatives Argument handelt.

<ul>
  <li class="positive" title="Positiv">Positiver Aspekt 1</li>
  <li class="positive" title="Positiv">Positiver Aspekt 2</li>
  <li class="negative" title="Negativ">Negativer Aspekt 1</li>
  <li class="positive" title="Positiv">Positiver Aspekt 3</li>
  <li class="negative" title="Negativ">Negativer Aspekt 2</li>
</ul>

Und im CSS:

.positive  {
    list-style-image: url(positive.png);
}

.nagative  {
    list-style-image: url(negative.png);
}

Wie man sieht ist das CSS identisch zu dem aus Methode 1 und nur das Markup unterscheidet sich. Damit hat man mit diesen zwei Methoden ein recht sicheres Paket im Petto, denn viele der Nachteile aus der ersten Methode werden hier zu Vorteilen.

Markup-technisch ist die Methode zwar in Ordnung; allerdings besteht immer noch (zumindest teilweise) das »Bilder aus«-Problem. Erst beim Hover mit der Maus wird der Titel als Tooltip gezeigt und das auch nur, wenn man einen anderen grafischen Browser als den Internet Explorer benutzt.

Soweit ich recherchiert habe, lesen die meisten Screenreader den Titel bei Listenelementen nicht mit.

Außerdem besteht hier als einziges das »Copy’n‘Paste«-Problem

  • Semantisch und Markup-technisch in Ordung
  • Mischung möglich
  • Nicht screenreaderfreundlich
  • Erweiterbar
  • Aussehen
  • »Bilder aus«-Problem
  • Internet Explorer zeigt den Titel nicht.
  • »Copy’n‘Paste«-Problem

Methode 3: Definitionsliste und Schriftzeichen

Definitionslisten zeichnen normalerweise eine Reihe von Begriffen und deren Definitionen aus, z.B. bei Glossaren. Das ist natürlich nur der Idealfall und selbst in der HTML 4-Spezifikation steht, dass es auch für andere Zwecke genutzt werden kann. Also warum nicht auch für unsere Tatsachengegenüberstellung?

Bei unserer Schriftzeichen-Definitionsliste zeichnen wir entweder ein Plus-Zeichen oder ein Minus-Zeichen mit dem dt-Tag aus. Der eigentliche Punkt folgt dann im dd-Tag. Mittels CSS-Formatierungen können wir die beiden Elemente auf eine Höhe bringen.

<dl class="aspects">
  <dt>+</dt>
  <dd>Pro-Argument 1</dd>
  <dt>+</dt>
  <dd>Pro-Argument 2</dd>
  <dt>&minus;</dt>
  <dd>Contra-Argument 1</dd>
  <dt>&minus;</dt>
  <dd>Contra-Argument 2</dd>
  <dt>+</dt>
  <dd>Pro-Argument 3</dd>
</dl>

Per float im dt lassen wir das dd rechts vorbei fließen und setzen die Elemente auf die gleiche Zeile.

.aspects  {
    line-height: 2em; /* Den Abstand der Aspekte erhöhen */
}

.aspects dt  {
    float: left;
}

Auch hier ist wieder der Vorteil mit der Mischbarkeit gegeben. Zudem haben wir keine Probleme mit Screenreadern und da keine Bilder zum Einsatz kommen, ist auch dieser Kritikpunkt hinfällig. Allerdings kann man bei dieser Methode nicht von einer schönen Lösung sprechen. Auch die Erweiterbarkeit ist praktisch nicht gegeben. Während man bei den vorigen Methoden jeweils nur eine neue Klasse anlegen musste, ist man hier gezwungen, ins Markup zu gehen und z.B. die Plus-Zeichen in Häkchen (U+2713) zu verändern.

+
Semantisch relativ okay
+
Volle Accessibility
Schön ist etwas anderes
Unschöne Eingriffe ins Markup
Keine gute Skalierbarkeit
+
Mischung möglich
Verwendung von Plus- und Minus-Zeichen ist fragwürdig.
+
kein »Copy’n‘Paste«-Problem

Definitionslisten mit Hintergrundbildern

Auch das ist wieder nur eine Abwandlung der Vorgängermethode. Die hässlichen Schriftzeichen werden dieses Mal durch schöne Hintergrundbilder ersetzt. Als Image-Replacement-Technik kann man sich seinen Liebling selbst aussuchen. Ich verwende gerne die sog. Phark-Methode.

Ein weiterer Vorteil neben dem besseren Aussehen liegt bei der Erweiterbarkeit. Durch das Hinzufügen einer Klasse, kann man eine andere Hintergrundgrafik einsetzen.

Wer gut aufgepasst hat, wird jedoch merken, dass dies nur auf grafische Browser ohne Bilderblocker zutrifft. Denn die Bildersetzungstechnik kann nur auf Kosten der Accessibility eingesetzt werden. Allerdings muss man noch erwähnen, dass durch das Ausblenden des Textes viel logischere Beschreibungen gewählt werden können. Für einen Screenreader-Nutzer wird es viel einfacher sein, einen Satz wie »Positiver Aspekt Doppelpunkt …« zu deuten, als ein bloßes »Plus …«.

Positiver Aspekt:
Sieht deutlich besser aus als Methode 3.
Positiver Aspekt:
Bessere Erweiterbarkeit …
Negativer Aspekt:
… aber diese eben nur eingeschränkt.
Positiver Aspekt:
Mischung möglich
Positiver Aspekt:
Bessere Beschreibungen für Screenreader
Negativer Aspekt
»Bilder aus, CSS an«-Problematik
Positiver Aspekt:
kein »Copy’n‘Paste«-Problem

Resumée

Wie man sieht hat jede Methode ihre Nachteile. Je nach Anwendungsbereich sollte man deshalb abwägen, ob die schlechtere Accessibility zu verschmerzen ist, oder ob man dafür lieber eine etwas unschönere Variante in Kauf nimmt.

Man kann auch alle Methoden gleichzeitig benutzen, da nur wenige Klassen notwendig sind. Den Rest erledigt man dann im Markup.

Aber wer weiß, vielleicht braucht man diese Techniken bald überhaupt nicht mehr, sondern kann seine Daten direkt in einen frisch implementierten Listentyp einfügen.

Kommentare [5]

Nico am 12.03.2009 um 16:43

Ist mir zwar bereits bekannt, aber alles schön erklärt und einige Details die mir noch nicht bekannt waren, war ne gute Entscheidung deinen Blog in den Feed Reader zu brennen :)

Markus am 12.03.2009 um 17:49

Vielen Dank

Luckerking am 12.03.2009 um 18:46

Was ist eigentlich mit dem alt Attribute bei Bildern?
Wir das Attribute bei den Textbrowsern nicht verwendet?
Sonst könnte man die Variante mit dem Bildern benutzten und jeweils das alt Attribute mit + oder – versehen.

Markus am 12.03.2009 um 19:35

Es handelt sich ja um CSS-definierte Bilder und diese kann man nicht mit einem Alternativtext versehen, sowohl Hintergrundbilder als auch Listengrafiken.

robin denz am 11.03.2011 um 17:19

ich versteh gar nichts weil ich scheiße bin und du auch :*

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll

PromoteJS

JS String .toUpperCase