gesurft mit Webstandards: heute.de

von timo / 16. Februar 2005 /

Das Zweite zieht nach: Nach der Tagesschau ist nun auch heute.de barrierefrei. Zwar gelingt es heute.de zugänglicher und zukunftsfähiger zu sein - der Code validiert und ist nach dem WAI-Standard barrierefrei. Sieht man jedoch genauer hin, kommen massive Markup- und CSS-Probleme zum Vorschein.

Layout & Lesbarkeit

Heute.de ist beim Vergrößern der Schrift in zoomfähigen Browsern sehr flexibel. Die Spalten vergrößern sich durch die Verwendung der Größeneinheit em proportional zur Schriftgröße. Sogar die Bilder (ebenfalls in em) skalieren mit. Das macht sie zwar pixelig, doch die Größenverhältnisse bleiben gewahrt. Einzig die Pulldowns und das Suchfeld werden schwer nutzbar. Im Internet Explorer skaliert die Website weniger gut: Wählt der Leser Schriftgrad größer wird die Schrift massiv groß. Bei Schrift kleiner wird sie völlig unlesbar. Beim Einblenden einer Sidebar verhält sich heute.de sehr starr und schneidet bei einem 15 Zoll Monitor mit einer Auflösung von 1024 x 768 Pixel die rechte Spalte ab.

Screenshot: Die Startseite von heute.de Die Weißräume und Abstände zwischen den Elementen wirken äußerst unharmonisch: Zur linken Navigationsspalte hat der Text ausreichend Luft, die Bilder im Vorspann hingegen nicht. Bei der Kombination Bild rechts – Text links, stößt der Text an die rechte Randspalte, hat aber 20 Pixel Abstand zum zugehörigen Bild. Ähnliche gestalttheorische Schwächen gibt es bei der rechten Mediathek-Wetter-Börse-Spalte. Dort tun sich graue Löcher auf und die senkrecht aneinandergereihten Mini-Bilder fügen sich unmotiviert zu einer Bildsäule zusammen. Das ist ästhetisch nicht unbedingt gelungen und kann Verständnisprobleme nach sich ziehen (Was gehört zusammen?). Die Unruhe, die das Layout ausstrahlt, wird durch die Verwendung von zwei verschiedenen serifenlosen Schriften (Arial und Verdana) in unterschiedlichen, sich nur minimal unterscheidenen Schriftgrößen weiter verstärkt.

Die Mischung aus knalligem Blau, modern gemeintem Orange und sachlichem Mittelgrau mag man vielleicht nicht hübsch oder unharmonisch finden, doch zumindest für User mit Sehschwächen funktioniert sie gut.

Markup

Screenshot der Artikelebene mit markierten Überschriften und Absätzen Zunächst die gute Nachricht: Der Code validiert nach XHTML Transitional Standard. Jetzt die schlechte: Semantisches Markup ist kaum zu erkennen. <h1> wird überhaupt nicht verwendet. <p>s kommen auch nicht vor. <div>s und <span>s werden oftmals tabellenartig verschachtelt. Bei der Mediathek in der rechten Randspalte kann dieses Phänomen in besonders krassem Ausmaß besichtigt werden (acht div-Verschachtelungen in einer Box). Durch das direkte Formatieren von HTML-Elementen wie <ul>, <li> oder <a> könnte der Code immens gestrafft werden.

Nur beispielhaft zwei weitere Markup-Sünden:
1) Auf der Startseite wird 25 Mal ein white.gif als Abstandhalter verwendet. 2) Hinter den drei Texlinks ganz oben auf der Startseite “Barrierefreiheit”, “Kontakt” und “Impressum” verbergen sich drei einzelne Listen-Elemente mit jeweils eigenem <ul>. Eine <ul> mit display: inline würde genügen.

Ohne Stylesheet ist die Website trotz der massiven Markup-Mängel gut les- und nutzbar.

Stylesheet

Screenshot von der Startseite mit eingeblenden CSS-Klassen und IDs
Das Stylesheet ist ganze 92 KB groß (im Vergleich: Tagesschau 21 KB, Stern 15 KB oder ABC News 59 KB). Kurzschreibweisen wie font: small/1.6em verdana; werden konsequent nicht verwendet. Stattdessen werden immer wieder font-family, font-weight, font-size einzeln gelistet. Allein die Eigenschaft font-family kommt 32 Mal vor. Es gibt 45 absteigende class-Selektoren nach dem Muster:
“.artikel-inhalt-image-left-p2 .bild-quelle“.

Aber nicht die komplette CSS-Gestaltung ist schlecht: Eine charmante Lösung wurde für die orangefarbenen Quadrate gefunden. Optisch markieren sie ein Thema und genau deshalb wurden sie nicht ins Stylesheet verlagert. Denn so bleibt die Information auch ohne Bilder erhalten. Als Alternativ-Text wird das Wort “Thema” ausgegeben.

Navigation

Die Haupt-Navigation funktioniert solide. Sie besteht aus einer textbasierten Liste und alle Hover-Effekte werden mit CSS erzeugt. Bedauerlicherweise können die Hauptrubriken von heute.de nicht per Accesskey angesteuert werden. Stattdessen kann per Tastatur zum Impressum navigiert werden. Was die Haupt-Navigation zu wenig hat, hat die Skip-Navigation zuviel: Eine Skip-Navigation soll eigentlich Wege verkürzen und keine neuen Navigationsprobleme schaffen. Statt einem einfachen Link “Direkt zum Inhalt springen”, bekommen Blinde gleich fünf Sprungmöglichkeiten. Die Auswahl fällt schwer, denn was ist der Unterschied zwischen “Globalnavigation” und “Hauptnavigation”? Und wohin bitteschön gelangt man, wenn man zu den “Kontextinformationen” springt? Die meisten Blinden werden die Skip-Links ohnehin nicht nutzen können, da diese mit display: none versteckt sind. Jaws, der meistverbreitete Screenreader, liest mit display: none markierte Elemente nicht vor. Besser zugänglich wäre es, die Skip-Links mit position: absolute; top:-500px; aus dem sichtbaren Bereich des Dokuments zu schieben.

Plattformunabhängigkeit

Daten & Fakten

Doctype: XHTML 1.0 Transitional
Größe HTML: 82 KB
Größe CSS: 92 KB
Geschwindigkeit: 84 Sek./ 56k
Relaunch: Januar 2005
Agentur: Pixelpark

Die Formularfelder und Pulldowns sind durch den Einsatz von Go-Buttons und Labels Screenreader-freundlich. Tabellen sind es jedoch nicht immer. Die Wetter-Tabelle hat kein summary-Attribut, das den Inhalt erklärt. <caption> und <th>s werden außer beim Wetter verwendet. Obwohl es ein eigenes Print-Stylesheet gibt, ist das Ausdrucken fast unmöglich: Firefox stürzt ab. Mit dem Internet Explorer erhält man zwar den Artikel, allerdings versteckt er sich irgendwo zwischen vielen leeren oder wenig bedruckten Seiten. Mit einem gutgemachten Print-CSS hätte man die Möglichkeit, den Lesern eine papiersparende und lesefreundliche Printversion anzubieten, in der Randspalten und Navigationsleisten ausgeblendet sind.

Aufbau & Ladezeit

Mit Modem braucht man bei heute.de etwas Geduld. Die Startseite ist inklusive Bilder 224 KB groß. Schaut man das erste Mal vorbei oder löscht seinen Cache regelmäßig, muss zusätzlich das Mammut-Stylesheet mit 92 KB geladen werden. Leider kann man die Wartezeit nicht mit dem Lesen der Alt-Texte der Bilder überbrücken, denn diese sind durch die Schriftfarbe Weiß unsichtbar.

Fazit

Bei heute.de wurde viel geleistet. Doch um wahrhaft fortschrittlich und komfortabel für alle zu sein, wäre weniger oft mehr: Weniger KB, weniger Schriftarten, weniger Klassen und vor allem weniger div- und span-Verschachtelungen.

V-Power: 1 von 5