Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

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

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 XI

Zum Saisonabschluss in der ersten Bundesliga treten vier Vereine gegeneinander an: Der Hamburger SV, der 1. FC Nürnberg, VfL Bochum und der VfL Wolfsburg.

Symbol Fußball-Aktion

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesliga­vereine und testen sie auf moderne Webstandards. Saisonabschluss bei den Webkrauts mit dem HSV, Nürnberg, Bochum und Wolfsburg.

Hamburger SV

Pünktlich zum Saisonbeginn präsentiert sich der Hamburger Sportverein in neuem Outfit, technischer Coach ist nun Typo3. Das Layout ist bis auf das Laufband gelungen, doch ansonsten läuft es nicht so rund. Die Hamburger kassieren schon vor dem Einlauf ins Stadion die ersten roten Karten: der „Weiter“-Button, die „mehr hier“-Grafiken und das „HSH Nordbank Arena“-Logo allesamt ohne Alternativtext, damit für die Navigation und die nächste Runde disqualifiziert.

Screenshot der Webseite des HSV, verkleinertDie Hanseaten suchen den Angriff: während der Validator für die Vorschaltseite noch 92 Fehler einstecken musste, geht er im unsportlichen Kampf mit der Hauptseite durch rekordverdächtige 530 Fouls fast zu Boden, während den Besuchern ein unnötiges Popup-Fenster präsentiert wird.

Mangelhaftes Kombinationsspiel auch bezüglich der Semantik: Navigationslisten und <h3> reichen offensichtlich, zusätzliche Impulse erhofft man sich durch Einsatz von 1-Pixel-GIFs und <br>-Elemente der Uwe-Seeler-Ära.

Der HSV-Besucher muss bei der Hauptnavigation mitdenken: Nur wer CSS abschaltet, kommt auch ohne JavaScript weiter. Das Navigieren mit der Tastatur ist bei aktiviertem JavaScript möglich, auf dunkelblauem Grund hätte man sich allerdings eine a:focus-Deklaration ebenso sehr gewünscht wie Alternativtexte für die interessanten Fotos. Die Navigationsstruktur ist zwar stringent und nachvollziehbar, doch die durch JavaScript generierte Minimalschrift und zu kleine Klickflächen sind alles andere als benutzerfreundlich.

Die Orientierung innerhalb des Zwei-Spalten-Layouts ist gut gelöst, das professionelle Design und eine unaufdringliche Flash-Animation bestimmen die angenehme Optik. Die Schriftgröße ist trotz ausreichender Kontraste etwas zu klein geraten, dafür ist eine Schriftvergrößerung in mehreren Stufen möglich. Ein Link zum Seitenanfang hätte der Funktionalität gut getan, vorbildlich dagegen die generierte Druckversion: man spart Verbrauchsmaterial und bekommt die wichtigen Inhalte.

Kommentator: Nils Pooker

1. FC Nürnberg

Laute Musik ist das erste, was einem von der Webseite des 1. FC Nürnberg in Erinnerung bleibt. Die Vorschaltseite, auf der diese Musik zu hören ist komplett flashbasiert, bietet aber auch ohne JavaScript und/oder Flash ihre Inhalte an, inklusive eines Links zur wirklichen Startseite.

Screenshot der Webseite des 1. FC Nürnberg, verkleinertDirekt zu Beginn der Seite werden über 600 Zeilen JavaScript geladen. Es folgen knapp 50 Zeilen mit versteckten divs, die die Subnavigation darstellen sollen und in die lieblos Links hintereinander hineingeschrieben sind. Erst dann folgt die obligatorische Layouttabelle mit der Hauptnavigation. Dass es hierfür mittlerweile so etwas wie „Listen“ gibt, hat sich derweil noch nicht bis nach Nürnberg herumgesprochen.

Die Navigation ist besonders clever umgesetzt, reagiert sie doch nur auf Mausberührung. Wer auf die Benutzung einer Seite per Tastatur angewiesen ist, schaut in die Röhre und kann die Unterpunkte der Menüs nicht erreichen. Auch auf den Seiten zu denen die Hauptmenüpunkte führen, findet sich keine Möglichkeit diese Unterpunkte aufzurufen.

Die Schriftgröße ist in Ordnung, bietet aber keine Möglichkeit der Vergrößerung. Einen weiteren groben Fehler aus Zugänglichkeitssicht hat man sich bei der Verwendung von Alternativtexten erlaubt: Statt sinnvolle Inhalte wird das alt-Attribut zwar angegeben, aber leer gelassen. Das bedeutet, dass ein Screenreadernutzer noch nicht einmal den Dateinamen eines Bildes vorgelesen bekommt. Alle Links der linken Spalte bleiben ihm dadurch ebenfalls unzugänglich.

Kommentator: Eric Eggert

VfL Bochum

Der nähere Blick auf das blau-weiß strahlende (Web-)Stadion des VfL Bochum 1848 stellt selbst den größten Fan auf eine harte Probe. Ein überaus vertracktes Frameset (von 1848?) hilft kurzfristig beim Vertuschen der vielen Fouls, die dem Schiedsrichter des W3C allerdings nicht verborgen bleiben, der eine gelbe Karte nach der anderen zückt. Die Mannschaftsteile <hx> und <li> sucht man beispielsweise vergebens auf dem Rasen. Dafür gibt es Rot – ohne Diskussion!

Screenshot der Webseite des VfL Bochum, verkleinertZiemlich unelegant humpeln verschachtelte Layouttabellen über den Platz, die nicht nur semantisch total fehlbesetzt sind, sondern in dieser geballten Form ein grandiose Aufblähung des Quelltexts zur Folge haben und für einen unübersichtlichen Code-Salat sorgen. Beim VfL muss nochmals ganz neu aufgestellt werden.

Ist man als Zuschauer auf Sehhilfen angewiesen, bekommt man schnell ein Problem: Bei einer Schriftvergrößerung verschwinden Teile der Hauptnavigation unter dem Inhaltsbereich. Man kann dann eigentlich direkt das Stadion verlassen: hier geht gar nichts mehr. Eine sinnvolle Navigation per Tastatur ist in Bochum auch nicht vorgesehen und die alt-Attribute sucht der darauf angewiesene Besucher vergebens.

Man trifft sich ja bekanntlich immer zweimal im Leben: den VfL mit Sicherheit beim nächsten Mal nur noch in der Bezirksliga wenn nicht ganz schnell alle Spieler ordentlich angezogen auf ihren Plätzen stehen (und kicken) .

Kommentator: Maxx Hilberer

VfL Wolfsburg

Der Bundesligist VfL Wolfsburg begrüßt seine Online-Besucher mit einer vorgeschalteten Startseite, die jedoch wenigstens sinnvolle Direkteinstiege in verschiedene Bereiche der Website anbietet. Unterdrückt man die Anzeige von Grafiken, bleibt auf der ganzen Seite aber nur eine Abfolge von Sponsorennamen übrig. Der Start in den Webauftritt geht dann genauso daneben wie der Saisonstart der Wölfe.

Screenshot der Webseite des VfL Wolfsburg, verkleinertAuf der eigentlichen Seite begrüßt uns eine klar unterteilte Struktur im typischen Grün der Wolfsburger mit übersichtlicher Navigation aber aufdringlicher Werbung. Ohne Grafiken verliert die Seite ihre Hauptnavigation. Die einzigen alt-Attribute werden für Grafiken mit dem Namen „Trenner“ vergeben; als würde man statt der Mannschaftsaufstellung die Namen der Balljungen durchsagen. Auch sonst wurde Semantik scheinbar bei der ausführenden Agentur nicht ausreichend trainiert; die meisten Versuche landen im Abseits. Für mehr als Überschriften der dritten Ebene hat es kaum gereicht.

Die Standard-Schriftgröße wird mit viel zu kleinen 62,5 Prozent vorgegeben, um dann die Texte im Inhalt wieder auf das 1,2-fache zu vergrößern. Bei Schriftvergrößerung durch den Benutzer bleibt die Seite jedoch nahezu ohne Einschränkungen benutzbar.

Bei ausgeschaltetem JavaScript gibt es kaum Einschränkungen, bis auf einige Gimmicks konnte ich keinen Spielerausfall feststellen. Der Quelltext ist zwar nicht valide, aber die Fehler sind mit wenig Aufwand abzustellen; es handelt sich weniger um Stockfehler als um kleine Unaufmerksamkeiten – aber auch so werden Spiele entschieden.

Dass sich Wolfsburg mit dieser Seite vermutlich in der oberen Hälfte der Webkrauts-Tabelle finden wird, ist kein Zeichen der spielerischen Qualität sondern eher das Versagen der Gegner. Kein Grund zum Feiern!

Kommentator: Stefan David

Symbol Fußball-Test

Kommentare

markus
am 30.08.2007 - 10:40

Waren das nun schon alle?

Permanenter Link

Die Kommentare sind geschlossen.