Website Award Berlin-Brandenburg 2007: Preise ohne Standards

Und schon wieder eine Preisvergabe an innovative Webseiten: der Website Award Berlin-Brandenburg 2007. Die Frage dabei ist nicht nur, dass die Barrierefreiheit unter den Tisch gekehrt (Quelle: Hauptstadtblog: Wir bloggen Berlin) wird, sondern vor allem, dass diese innovativen Webseiten nicht mal im Ansatz standardkonform sind.

Die Bewertungskriterien des Preises sind in den üblichen schwammigen Begrifflichkeiten gehalten und würden sehr wohl auf standardkonforme Verarbeitung und Barrierefreiheit zielen.

Leider ist aus diesem Kriterienmischmasch keine Stringenz erkennbar, es läßt sich jedoch durchaus ein Katalog für die Standardisierung und Barrierefreiheit der Webseite erkennen – ich erarbeite mal eine Stringenz aus den Kriterien:

Website Award: Bewertungskriterien für die Standardisierung einer Webseite

Klare Strukturierung und Handhabe der Webseite
Funktionstüchtigkeit der Webseite
Schlüßige Navigation
Übergreifende Browserkompatibilität
Funktionstüchtige Formulare

Website Award: Bewertungskriterien für die Barrierefreiheit einer Webseite

Zugänglichkeit für jeden Nutzer (Wahrnehmbarkeit)
Verständlichkeit und Übersichtlichkeit der Inhalte
Eindeutig erkennbare Navigation: Nutzung eines Breadcrumbs und Bereitstellung von Navigationshilfen
Sinnvolle Farbgebung
Tests auf unterschiedlichen Auflösungen
Sind ALT-Attribute für Bilder vorhanden

Nun, das ist kein geringer Katalog. Sehen wir uns die beiden Sieger an, für das Land Berlin, www.classic-shoe-shine.com, und für das Land Brandenburg, www.carporte.de. Ich führe hier nur einige wesentliche Punkte an, die eine unzureichende Barrierefreiheit und Angleichung an Webstandards erkennen lassen. Die Frage bleibt – wie immer – reicht es heute, wenn eine Webseite nur inhaltlich innovativ sein will?

Preis Land Berlin: www.classic-shoe-shine.com

Eigentlich sollte man solche Webseiten nicht mehr besprechen, denn sie ist ausschließlich durch Layouttabellen realisiert. Dadurch entfällt die Möglichkeit, via CSS-Datei und semantischem HTML eine sinnvolle und dem aktuellen HTML-Standard entsprechende Seite zu realisieren. Ohne CSS-Datei sieht die Seite daher auch fast so wie mit mit aus. Auf eine semantische Auszeichnung (etwa eine Hierarchie von Überschriften) wurde gänzlich verzichtet. Auch wenn die Seite nicht unflott aussieht, ist sie HTML-technisch von vorgestern:

Validität: keine Angabe eines HTML DOCTYPES am Anfang der Webseite und diverse Fehler und Warnungen. Wenngleich bei Layouttabellen oftmals weniger Fehler zu erwarten sind.
Layouttabellen: Die Webseite besteht aus ineinander geschachtelten Tabellen, auf der Startseite finden sich ganze fünf DIV-Elemente.
Die Layouttabellen bringen es wohl mit sich, dass längst nicht mehr verwendete HTML-Attribute wie BGCOLOR verwendet werden.
Keinerlei Überschriftenhierarchie, Hervorhebung und Strukturierung der Webseite werden mit Hilfe von Schriftgrafiken und physikalischen Textauszeichnungen erreicht.
Navigationen sind nicht als Listen erstellt, und wiederum als Schriftgrafik realisiert – immerhin mit ALT-Attributen versehen. 😉
Auf 800 x 600 Pixel Auflösung skaliert die Webseite nicht mittig, was eigentlich nicht so schwierig gewesen wäre, da rechts noch genügend Abstand vorhanden ist.
Formulare wie etwa das Kontaktformular sehen hübsch aus, aber sind in keinster Weise an den aktuellen Standard angepasst (z.B. keine LABEL-Elemente).
Die unglaublich schmale CSS-Datei zeigt schon, das es sich um ein Tabellenlayout mit Inline-Styles handelt. In der CSS-Datei sind dann nur noch marginale Dinge geregelt.

Preis Land Brandenburg: www.carporte.de

Diese Webseite wirkt ebenfalls ziemlich flott und auf den ersten Quellcode-Blick schon weiter fortgeschritten. Jedoch sollte man sich nicht durch Äusserlichkeiten täuschen lassen, der Blick unter die Quellcode-Haube zeigt, auch hier ist für die Standardisierung nicht viel getan worden und wenn, dann am falschen Ende:

Auch hier fehlt der HTML DOCTYPE am Anfang der Seite.
Und sie verwendet einen wunderbaren Mix aus Layouttabellen und DIV-Elementen. Ich würde diese Mischung auf ein größeres CMS wie Typo3 zurückführen, aber ich lasse mich gerne korrigieren.
Es wird zwar eine semantische Auszeichnung – etwa Überschriften – verwendet, jedoch wird keine Hierarchisierung vorgenommen, auf der Startseite kommen nur H3-Elemente zum Einsatz, H1– oder H2-Elemente fehlen völlig. So wäre eine Hierarchisierung im Nachrichtenbereich auf der Startseite durchaus sinnvoll, derzeit rangieren aber der Bereichsname und die Inhalte des Bereichs alle auf einer Hierarchieebene (H3). Die semantische Strukturierung endet auch mit den H3-Elementen, ansonsten wird fleissig auf physikalische Auszeichnung wie STRONG-Attribute zurückgegriffen.
Bis auf den Sprachwechsel sind keine Navigationsbereiche als Listen gekennzeichnet, sie sind tapfer als Layouttabelle realisiert.
Deaktiviert man die Grafiken auf der Webseite, ist der Hauptbereich der Webseite nicht mehr lesbar. Die Farbkontraste der Webseite validieren auch zu zwei Drittel nicht, was zeigt, dass die Farbkontraste – wie im Extremfall ohne Grafiken – nicht hinreichend überdacht wurden.
Bei 800 x 600 Pixel Auflösung skaliert der äußere Rahmen gut mit, es muss nur minimal horizontal geblättert werden.
Immerhin gibt es Ansätze, die Webseite in Richtung Barrierefreiheit fit zu machen. So findet man eine Hilfnavigation, die das direkte Ansteuern des Inhaltsbereichs ermöglicht. Aber auch eher obskure Hilfslinks, die Randbereiche oder Bilder der Webseite ausblenden oder alle Links unterstreichen. Warum auf der Standardseite auch noch ein Link „Fenster schließen“ angebracht wurde, bleibt Verhandlungssache. 🙂 Diese Möglichkeiten werden aber erst sichtbar, wenn man die CSS-Datei gänzlich deaktiviert. Sie werden nicht sichtbar, wenn man etwa via Tastatur steuert.
Ein weitere Link, der nur ohne CSS-Datei erkennbar wird, führt auf eine barrierefreie Version der Webseite. Abgesehen davon, dass so eine Version überhaupt nicht nötig wäre, ist diese sogar kontraproduktiv – je tiefer man sich auf dieser Seite bewegt, desto mehr rote, riesige barrierefreie Grafiken versammeln sich. 🙂 Ganz abgesehen davon, dass diese barrierefreie Seite genauso aussieht, wie man sich solche Seiten gemeinhin vorstellt: gruselig. Dann lieber zurück zur Standard-Webseite und nicht zur Standart Webseite, wie es dort so schön grafikbetont heißt.
Auch die Formulare sind zwar wiederum ganz schön anzusehen, weisen aber unter der Haube wenig aktuelle Optimierung und Standardisierung auf.

Fazit

Warum sehe ich mir solche Seite überhaupt an? Weil ich denke, dass hier mehrere Missverständnisse gleich auf mehreren Ebenen zusammentreffen und diese sollte man ansprechen. Wir haben auf der einen Seite Preise und deren Kriterienkatalog, der meisthin einen eher diffusen, unsicheren Eindruck macht. Irgendwie wird da zwar alles kontrolliert und abgedeckt, aber gerade darum nichts zu Ende gedacht und kontrolliert. Auf der anderen Seite haben wir die prämierten Seiten, die ein Aushängeschild sein sollen in Sachen Innovation und Fortschritt.

Daher finde ich es wichtig, dass man sich diese Aushängeschilder genauer ansieht. Besteht Innovation und Fortschritt nur darin eine hübsche Oberfläche und möglichst viele Inhalte anzubieten? Leider reicht es nicht, damit unterschiedliche Nutzer wirklich anwenderfreundlich und barrierearm (von -frei will ich hier gar nicht mehr sprechen) durch die Seite zu lotsen. Was bleibt ist der Eindruck, hier prämiert man traditionell und dabei doch edel, galant und hochwertig (Quelle: Website Award Berlin-Brandenburg 2007) – aber sonst?

Da freue ich mich richtig auf den Bundeswettbewerb, der die Sieger auf der Computermesse CeBIT im März prämiert, da nehmen auch die beiden obigen Sieger teil. 😉