Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

»Maßgebend is auf’n Platz!« – Teil IX

Heute treten zwei Traditionsvereine gegeneinander an. FC St. Pauli gegen den FC Köln.

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards.

Der Begriff ›Traditionsverein‹ bedeutet in der Spielzeit 07/08 in der Regel, dass der graue Alltag in den Niederungen der zweiten Liga stattfindet. So auch bei unserer heutigen Paarung, dem 1. FC Köln und dem FC St. Pauli – beides Vereine mit, um es vorsichtig auszudrücken, sehr traditionellen Web-Auftritten.

Pauli gegen Köln – der Welt­pokal­sieger­besieger gegen den Karnevalsverein

Bereits beim Warmlaufen stolpert der Validator bei beiden über Fehler, die durchaus vermeidbar wären. Wie so oft sind es die Standard­situationen, in denen Eigen­tore wie uncodierte Ampersands, XHTML-Syntax in HTML und anders­herum, fehlende oder falsch geschlossene End-Tags, historisch überholtes wie <marquee> usw. fallen.

Bilder sind bei den Geißböcken fast durchgängig mit leeren alt-Attributen ausgezeichnet, lediglich einige besitzen einen sinn­vollen Alternativ­text. Dieser ist jedoch meistens redundant, da er im Text noch mal wieder­holt wird. In diesem Punkt gibt es auch für das Freuden­haus der Liga nicht nur vom Validator die gelb-rote Karte: einige Bilder haben vorbildliche Alternativ­texte, aber bei vielen fehlt das im Regel­buch vorgeschriebene alt-Attribut komplett. Mangels Alternativen würde ein Screen­reader hier spielfluß­behindernd "/pics/ligencontainer/logo278.gif" vorlesen.

Semantik? Retter gesucht!

Nicht nur das Stadion ist eine Baustelle, auch auf der Pauli-Website findet man zuhauf historische Versatz­stücke aus der Frühzeit der Webentwicklung. Sinnvolles Markup bleibt am Millern­tor, aber auch im Müngers­dorfer Stadion in der Umkleide­kabine. Insbesondere Pauli glänzt durch die nahezu vollständige Abwesen­heit von sinnvollen Struktur­elementen wie z. B. Überschriften. Dafür finden sich Berge von Spacer-GIFs und  , vereinzelte Layout-Tabellen im CSS-Gerüst und hart­verdrahtete Formatierungen. Der Rekord auf Pauli: ein fast 30 Kilo­byte großes Inline-Style Sheet im HTML-Code.

Der FC hat sich seit dem aktuellen Relaunch in diesem Bereich etwas besser aufgestellt: zumindest gibt es nun eine halb­wegs brauch­bare Überschriften­struktur. Dass aber die bisher zu Hauf vorhandenen FONT-Tags durch Inline-Styles ersetzt wurden ist keine wirkliche Verbesserung, sonder nur derselbe Murks mit anderen Mitteln. Mitteln, bei denen jeder einge­fleischte Standardista sein Fähnchen verbrennen würde.

4-4-2 mit Raute – die Navigation

Nicht viel zu meckern gibt es bei der Navigation von St. Pauli. Auch Ungeübte können sich in der klar gegliederten Struktur zurechtfinden, die keine besonderen Ansprüche an die Technik oder das Können der Nutzer stellt. Ganz anders bei der Macht am Rhein: Bei der vorherigen Version brauchte man ein ruhiges Händchen, Geduld und den unbedingten Willen, die bei der leisesten Berührung umfallenden Italiener Untermenüs zu bewältigen.

In der aktuellen Spielzeit setzt man nun auf eine Flash-basierte Navigation mit mikro­skopisch kleinen und nicht skalierbaren Texten, die zudem nicht mit der Tastatur zu bedienen ist. Bei deaktivierten Plug-Ins und abge­schaltetem JavaScript erhält man zwar eine statische Alter­native, die aber ebenso wenig nutzbar ist, da viele Navigations­punkte wegen Mängeln im CSS hinter dem Seiten­inhalt verschwinden. Wie im richtigen Leben: der Geißbock träumt von San Siro und der Anfield Road, die Realität heißt aber Hermann-Löns-Stadion und Ernst-Abbe-Sportfeld – und zu mehr reicht es auch mit dieser Navigation nicht.

Accessibility in der Abseitsfalle

Während die Stadien mittlerweile Zugänge für Rolli­fahrer anbieten, so hat sich das Thema Barriere­freiheit noch nicht bis zu den Web-Entwicklern herumgesprochen. Neben den fehlenden, leeren oder falschen alt-Attributen gehört dazu insbe­sondere die Anpass­barkeit an verschiedene Benutzer­einstellungen und die Bedienbar­keit mit alternativen Eingabe­geräten.

Durch die scheinbar beliebige Verteilung von tabindex-Attributen mit der Gieß­kanne erinnert die Tastatur­navigation bei Pauli eher an Hüpfe­kästchen denn an Systemfußball. Auch bei Kölle kein gepflegtes Kurzpaßspiel: von der Kopf­zeile geht es unter Umgehung der Navi­gation direkt mit einem langen Pass quer über die Seite auf die rechte Außen­bahn. Nach ein paar Dribblings dort geht es zurück auf links und erneut ins Mittel­feld, wo sich der Ball endgültig verliert. Ganz schlimm: wie bei vielen Typo3-Installationen wird der Tastaturfokus per JavaScript (onfocus="blurLink(this);") geblockt – ohne Maus geht also gar nichts.

Du hast die Haare schön …

Ebenfalls ein unterirdischer Grottenkick ist die Robustheit der Gestaltung und deren technische Umsetzung. Die Rheinländer betreiben aggressives Fore­checking – gegen Änderungen der Schriftgröße durch den Nutzer setzen sie eine Abwehr von starren Höhen­angaben. Dadurch verschwinden oder überlappen Inhalte schon, sobald man nur 1-2× auf Apfel-+ gedrückt hat. Gegen diese Beton­abwehr mit echten Zweitliga-Qualitäten hilft nur noch das Abschalten von CSS, wenn man auf größere Schrift angewiesen ist und auch etwas lesen möchte. Die Hamburger machen hier im Mittel­feld einige Punkte gut, aber auch dort sind Inhalte in den äußeren Spalten und den Über­schriften nicht mehr lesbar, sobald der Nutzer eine etwas andere Schrift­größe eingestellt hat.

Kommentator: Tomas Caspers