Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

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

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 I

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Am heutigen Spieltag muss sich auch der Deutsche Meister einem Test unterziehen.

Symbol Fußball-Aktion

Zum Saisonstart widmen sich die Webkrauts den Internetauftritten aller 36 Bundesligavereine und testen sie auf moderne Webstandards. Am heutigen Spieltag muss sich auch der Deutsche Meister einem Test unterziehen.

Hertha BSC Berlin

Optisch präsentiert sich die Webseite von Hertha BSC Berlin modern, und auch die Übersicht bleibt trotz vieler Inhalte gewährleistet. Leider wurde “unter der Haube” kein Wert auf korrekte Semantik gelegt. Es gibt zwar eine halbherzige Trennung von Inhalt und Layout, aber es werden immer wieder Layouttabellen und Überschriften mit DIV-Klassen statt den H1-H6 Elementen eingesetzt.

Screenshot der Webseite von Hertha BSC Berlin, verkleinert Die Navigation ist auch der größte Problempunkt der Webseite, da bei den Bildlinks zwar auch Text hinterlegt ist, dieser aber mit display: none; ausgeblendet wird und die Navigation somit aus Sicht der Barrierefreiheit unbenutzbar ist. Die Unternavigation besteht zwar nur aus Textlinks, wird aber nur bei aktivem JavaScript angezeigt.

Beim Thema Barrierefreiheit fällt auch die fehlende Tastatur-Unterstützung auf, die aufgrund des häufigen Einsatzes von Bildlinks sowie fehlenden Sprunglinks und Fokushervorhebungen unnötig behindert wird. Möchte der Nutzer die Schriftgröße anpassen, verschiebt sich die Unternavigation sofort auf den gleichfarbigen Hintergrund. Auch an vielen anderen Stellen treten problematische Verschiebungen auf, die zum größten Teil durch die fixe Breite des Layouts in Verbindung mit pixelgenauem Design entstehen.

Bedenkt man dann noch die fehlenden Alternativtexte bei relevanten Bildern (RSS-Hinweis, Drucken, etc.) muss man leider zum Schluss kommen, dass noch viel Bedarf an Nachbesserungen besteht.

Kommentatorin: Nina Gerling

MSV Duisburg

Der Meidericher Spielverein 02 e.V. Duisburg – kurz MSV Duisburg – ist nominell zwar ein Aufsteiger, in Punkto Webstandards aber klarer Abstiegskandidat. Kaum ein Fettnapf, der nicht ausgelassen wurde. Neben der Verwendung von Frames und mehrfach verschachtelten Layout-Tabellen, sind es vor allem die mangelnde Trennung von Inhalt und Verpackung und fehlende Alternativtexte für Logo und ähnlich wichtige Elemente, die der Seite Kreisliga-Niveau attestieren. Das wird auch nicht durch den exzessiven Gebrauch von Meta-Tags und dem Hinweis “einfacher Texteditor” im Meta-Eintrag “generator” aufgewogen – im Gegenteil.

Screenshot der Webseite des MSV Duisburg, verkleinert Im Trainingsspiel mit den W3C-Validatoren werden die Schwächen im Spielsystem klassisch augedeckt: Verwendung der falschen DOCTYPE-Deklaration, falsche Attribute, Gestaltung mittels Inline-Styles und vielerlei veralteter Techniken. Die Abwehr wackelt, es hagelt Gegentreffer. Wirklich schlimm wird es aber erst, wenn man JavaScript ausschaltet: Dann verschwindet nicht nur die Navigation, sondern auch sehr viel von der Funktionalität der Seite. Dass die Seite insgesamt 717 Kilobyte beim Laden wiegt, Schriftgrößen absolut in Pixel gesetzt und damit im Internet Explorer nicht vergrößerbar sind, bei Farbkontrasten nur in der Hymne Wir sind Zebras weiß blau, unser Klub, der MSV berücksichtigt wurde und man vor lauter Werbung und Blinken den Inhalt übersieht runden den Kreisliga-Eindruck ab.

Kommentator: Ansgar Hein

VfB Stuttgart

Die Seite des amtierenden deutschen Meisters zeigt sich aufgeräumt, beinahe bieder und kommt ohne Vorschaltseite aus. Im Inhaltsbereich findet man einen Nachrichtenticker aus Flash, in dem man allerdings intuitiv über Bilder navigieren kann. Zudem ist es möglich die Animation abzustellen.

Screenshot der Webseite des VfB Stuttgart, verkleinert Unter der Haube werkelt eine Art HTML, welches wenige Fehler produziert und sogar Listen enthält. Das war es dann aber auch mit der Semantik: Überschriften-Elemente sind kaum zu finden und es gibt Link-Elemente, die auf nichts verweisen (da kein href-Attribut vorhanden ist) und ohne JavaScript oder Maus nicht bedienbar sind.

Die Schriftgröße ist in Ordnung, bei ihrer Vergrößerung aber kann die Schrift in der Navigation nicht mitwachsen, da sie aus Grafiken besteht – die immerhin mit Alternativtexten ausgestattet sind. In den Kästchen auf der Startseite wachsen die Inhalte schon bei der ersten Vergrößerungsstufe heraus und werden versteckt – inakzeptabel!

Hover-Images werden per JavaScript ausgetauscht, welches nicht ausgelagert ist, sondern die Seite aufbläht. Zudem wird bei allen möglichen Links das Attribut target="_self" angegeben, was aber die normale Art ist wie Browser mit Links umgehen. Manchmal findet man aber auch Links, die mit target="_blank" ausgezeichnet sind. Leider gibt es keine Hinweise für den Benutzer, dass die Seite in einem neuen Fenster geöffnet wird.

Kommentator: Eric Eggert

Symbol Fußball-Test

Kommentare

Peter Kröner
am 12.08.2007 - 10:36

Im Februar hatte ich mal eine HTML-Fehler-Tabelle mit den Websites aller Bundesligaclubs zusammengestellt. Fazit: Eigentlich müssten alle absteigen.

Permanenter Link

Edoardo
am 12.08.2007 - 14:34

bundesliga.de selbst sieht auch recht grauslig aus.

Permanenter Link

Thomas Geromiller
am 28.08.2007 - 12:51

Die Seite vom VfB Stuttgart ist Meister unwürdig.. Kaum Information für Fans. Seit neuestem das kostenpflichtige Highlight vfbtv.de. Meine Wertung 4- und der groeste Witz in den Metatags sind Spieler drin die seit 10 Jahren nicht mehr im Verein sind.

Gruss Gero

Permanenter Link

Die Kommentare sind geschlossen.