gesurft mit Webstandards: SPD Wahlkampfportal

von timo / 8. August 2005 /

SPD Wahlkampfportal Die SPD verpasst die Chance, mit ihrem Wahlkampf-Portal modern, fortschrittlich und barrierefrei aufzutreten. Zwar sind gute Absichten erkennbar, jedoch gibt es handwerkliche Mängel wie unbeholfene Layout-Tabellen und einen unnötig komplizierten Stylesheet-Einsatz.

Layout & Lesbarkeit

Die neue SPD-Farbe, ein mattes Stützstrumpf-Beige, scheint nicht unumstritten. Im Stylesheet ist ein alternatives Orange auskommentiert. Offiziell wird die neue SPD-Farbe, die unverbraucht und unbehaftet das Image und die Inhalte der Partei transportieren soll, “Umbra” genannt. Zur Farbe nur soviel: Schwarze Schrift auf Dunkel-Beige sieht trist und schwer aus. Die kontrastarme Kombination lädt wenig zum Lesen des Aufmachers ein, obwohl dieser prominent und plakativ gestaltet ist.

Generell ist die Lesbarkeit der Texte sehr gut. Die Textaufbereitung ist vorbildlich: Fettungen, kurze Absätze, leicht erhöhter Zeilendurchschuss. Listen und Aufzählungen vereinfachen das Lesen und machen die Texte schnell abscannbar. Ebenfalls positiv zu erwähnen: Die Schrift lässt sich auch im Internet Explorer sinnvoll vergrößern.

Screenshot: Die Startseite vom SPD Wahlkampfportal am 4. August 2005 Beim Layout wurde Reformfähigkeit bewiesen. Die SPD geht weg vom universell einsetzbaren 3-Spalten-Layout. Die Seite wird von einem wirkungsvollen Aufmacher mit exzellenten Fotos dominiert, der die ganze Seitenbreite ausfüllt und bei einer Auflösung von 1024×786 Pixel in der Höhe mehr als ein Drittel des sofort sichtbaren Bereichs einnimmt. Darunter folgt der Claim “Vertrauen in Deutschland” und drei plakativ rote Boxen, in der viel Navigation und eine Unterstützer-Promotion untergebracht ist. Der Newsbereich folgt zweispaltig: Links tagesaktuelle Meldungen, rechts Banner und Aktionen.

Die Seite ist zentriert ausgerichtet, hat eine fixe Mindestbreite und wurde für die meistverbreitete Auflösung 1024×786 und größer optimiert. Oft wird nicht bedacht, dass viele mit offener Bookmark-Leiste surfen. Einige Inhalte werden bei 1024 mit eingeblendeter Sidebar abgeschnitten. Die Skalierbarkeit wurde nicht gut durchdacht.

Markup

Screenshot mit markierten div-Containern, Überschriften und Absätzen Stellen wir uns vor es ist 1998, und es ist Wahlkampf. Man stellt überraschend fest: Eine sehr einfache und reduzierte Tabellenstruktur. In der Realität, 2005, muss man sagen: Ein völlig unverständlicher und ungerechtfertigter Einsatz von Layout-Tabellen. Auch ohne Stylesheets oder im alten Netscape 4.x sieht das Layout kaputt und verschoben aus (eine Abwärtskompatibilität kann also nicht der Grund für den Tabelleneinsatz gewesen sein). In der Benennung von CSS-Klassen findet diese rückwärtsgewandete Seitengestaltung ihre Fortsetzung. Klassen werden teilweise wie früher font-Tags oder Design-Elemente für Tabellen eingesetzt: class="leftCol bgUmbra", class="colorUmbra" oder class="font2". Mit solch unsemantischen class-Attributen werden Inhalt und Präsentation leicht durcheinandergemixt.

Über den Rest des Markups lässt sich nicht meckern. Zwar wird das h1-Element nicht zur Markierung der wichtigsten Überschrift verwendet, sondern als Seitentitel. Folglich lautet auf allen Seiten die h1 gleich (“SPD Wahlkampfportal 2005”) und hat nur einen Zweck, den Titel der Seite zu doppeln. Damit wird das Potenzial des h1-Elements verschenkt – den wichtigsten Inhalt der Seite zu markieren – und blinde Menschen wird es etwas nerven, den Titel zweimal zu hören. Doch es gibt Schlimmeres. Schlimmer ist, dass die Layout-Tabelle im summary-Attribut die Beschreibung "Layouttabelle" ausweist. Das ist nett gemeint, aber falschverstandene Barrierefreiheit. Genauso falsch wäre es, Blind-Gifs den Alt-Text “Spacer-Gif” oder “Platzhalter” zu geben. Für blinde Menschen bringt dies keinerlei Erleichterung – im Gegenteil.

Es werden <p>s für Textabschnitte und <li>s für Listen verwendet. Auf das Element <div class="teaser">, das jeden News-Anreißer umschließt, könnte man verzichten. Das würde auf der Startseite acht div-Container einsparen. Okay, das ist jetzt ein wenig in den Krümeln gesucht, denn es gibt lobenswerterweise kaum unnötige div-Verschachtelungen.

Stylesheet

Screenshot eine Liste auf der Startseite vom SPD Wahlkampfportal Die Entwickler sind nicht zu beneiden – die Dateien sind kaum zu überblicken. Zusätzlich zu den drei Haupt-Stylesheets werden drei weitere CSS-Dateien per Browserweiche zugewiesen. Bei einem solch einfachen, gradlinigen Design sollte man eigentlich ohne große Extra-Angaben für Opera, Safari, IE6, IE5.5 und IE5 auskommen.

Bei der Verwendung von CSS wurde oft sehr verschwenderisch vorgegangen. Hier ein typisches Beispiel inklusive Inline-Styles:

<li><a href="http://www.rote-wahlmannschaft.de" target="_blank"
title="Externer Link: Rote Wahlmannschaft" class="linkListItem"
style="background-image:
url(/prj-spdwkportal05/images/icon_community.gif);">
Rote Wahlmannschaft</a></li>

Eleganter wäre es, das Aussehen der verlinkten List-Items über den Kontext des <li>-Elements zu kontrollieren und das individuelle Hintergrundbild des jeweiligen Links per Klasse (z.B. <li class="newsletter">) einzubinden. So wären Inhalt und Design sauber getrennt, die Seiten exportfähiger und eine schnelle Umgestaltung über eine zentrale CSS-Datei blitzschnell möglich.

Navigation

Zunächst mutet die Navigation recht einfach an. Alle Inhalte sind über die linke rote Box zu erreichen. Die rechte rote Box bündelt so etwas wie Mitmach-Links (interne und externe Links). Die Unternavigation jedoch ist etwas gewöhnungsbedürftig: Bei Bedarf werden die zwei benachbarten roten Boxen zur Navigationsebene zweiter und dritter Ordnung. Ab und an erscheint die Unternavigation wie bei “Themen” auch nicht in der umfunktionierten Navigations-Box, sondern als Liste im Textbereich.

Externe Links, die einem neuem Browser-Fenster geöffnet werden, sind manchmal mit einem entsprechenden Hinweis gekennzeichnet, manchmal nicht. Die Verwendung von Title-Texten im Navigationsbereich ist ebenfalls wenig konsistent. Schade, einige sind gut getextet.

Es wird oft in Handbüchern zur Barrierefreiheit empfohlen: Erhöhe die Verständlichkeit von Links durch Icons. Das mag eine gute Idee sein, wenn die Icons gut sind – und nicht verniedlichend oder mehrdeutig. Schaut man sich das Icon für die “Rote Wahlmanschaft” an, denkt man sofort an “Mensch ärgere dich nicht”. Und weiter dichtet man: “Mensch, Rote Wahlmannschaft, ärgere dich nicht, wenn du von den Schwarzen rausgeworfen wirst.”

Für blinde Menschen gibt es eine Skip-Navigation, mit der sie direkt zum “Hauptinhalt dieser Seite [Alt] + [1]”, zur “Hauptnavigation [Alt] + [2]” und zur “Servicenavigation [Alt] + [3]” springen können. Praktischer als der unverständliche Link zur Service-Navigation, wäre ein direkter Link zur Suche. Die drei Skip-Links haben die Accesskeys 1-3. Accesskeys zu anderen Bereichen, wie zur Startseite oder zum Kontakt gibt es nicht. Eine Sitemap gibt es auch nicht.

Plattformunabhängigkeit

Daten & Fakten

URL: kampagne.spd.de/
Doctype: HTML 4.01 Transitional
Größe HTML: 18 KB
Größe CSS: 42 KB
Launch: Juli 2005
Agentur: Ahrens & Bimboese face2net GmbH

Die Suche und das Kontaktformular sind durch den Einsatz von Labels barrierefrei. Sich durch ein ellenlanges Pulldown-Menü mit Kontaktadressen wühlen zu müssen, ist für sehende Menschen eine Zumutung – für blinde Besucher stellt es eine fast unüberwindliche Hürde dar: 20 Optionen mit bis zu sieben Wörtern pro Option.

Die Mehr-Links direkt ohne Leerstelle nach dem Anreißer-Text “+++mehr+++” verlangen von Blinden eine hohe Frustrationstoleranz. Nach jedem Anreisser wird vorgelesen: “plus,plus,plus,mehr,plus, plus plus”. Zudem erhalten sie keine Information, wo der Link hinführt. Die einfachste Regel zur Barrierefreiheit “Gib allen Bildern einen Alternativ-Text” wird von der SPD nicht befolgt. Die Fotos neben den News-Teasern auf der Startseite haben keine Alt-Texte und sind somit für blinde Menschen oder Nutzer, die einen Textbrowser verwenden, nicht existent.

Schöne Sache, die oft vernachlässigt wird: Die Texte können durch ein eigenes Print-Stylesheet ohne Navigation und Randspalte papiersparend ausgedruckt werden.

Aufbau & Ladezeit

Die Startseite lädt recht fix. Mit Bildern ist sie 132 KB groß. Obwohl es zahlreiche Stylesheets gibt, laden diese relativ zügig. Für Internet-Explorer-Nutzer sind alle zusammen 42 KB groß für Firefox-Nutzer 37 KB. Das ist nicht wenig, aber zu verkraften. Uraltes Problem, welches bei einem “gesurft mit Webstandards” eigentlich nicht mehr vorkommen sollte: Die Layout-Tabelle um alle Inhalte verzögert den Aufbau.

Fazit

Die SPD erhält einen Punkt für die wirkungsvolle Seitengestaltung, das schlanke Markup und die vorbildliche Textaufbereitung. Mit ein wenig Aufwand mehr, hätte die SPD aus Webstandards-Sicht leicht 4 Punkte erreichen können.

V-Power: 1 von 5