Am Dienstag, den 27. November 2012, spülte mir Twitter gleich am Morgen in die Ohren, dass sueddeutsche.de relauncht hat. Da die Süddeutsche zu den Newsseiten gehört, die ich öfter frequentiere als manch anderes Portal deutschen Qualitätsjournalismus, war ich natürlich sofort neugierig – und ebenso sofort riesig enttäuscht.

Wo sind die Überschriften? 🔗

Wie schon im letzten Jahr bei DerWesten und dem BR scheinen auch bei sueddeutsche.de die Überschriften-tags auf der Startseite „aus“ gewesen zu sein. Es gibt genau einen h1-Tag auf der Startseite und sonst keine. Für die Stellen, an denen man Überschriften der 2. und 3. Ordnung wunderbar logisch und vernünftig strukturiert hätte anbringen und so eine sehr konsistente Abstufung hätte hinbauen können, finden sich solche Konstrukte:

744 <div id="topthemen" class="teaserlist maincolumn hfeed" role="main" aria-labelledby="topthemenlabel"> 
745 <p class="offscreen" id="topthemenlabel">Top Themen</p>

OK, hier hatte durchaus jemand eine im Prinzip nicht dumme Idee und wollte eine Landmark-Sektion mit einem Label, vermutlich für Screen Reader, versehen. Leider werden Labels auf Landmarks bisher nur von VoiceOver + Safari auf dem Mac oder iOS-Geräten überhaupt ausgewertet. Das Label erscheint für alle anderen Screen-Reader- und Browser-Kombinationen lediglich als einfacher Text, der als erstes in diesem Landmark steht.

Kleiner Tipp: Verweist aria-labelledby auf ein einzelnes Element, kann man auch gern aria-label nehmen und den Text direkt als Parameter hineinschreiben. Das erspart das Erstellen und spätere Rendern eines zusätzlichen Elements, das bei Abschalten des CSS auf einmal sichtbar wird. Oops!

Und dann stößt man hierauf:

764 <li class='hentry noimage first'> 
769 <a href="http://www.sueddeutsche.de/politik/abstimmung-ueber-beobachterstatus-clinton-ruegt-palaestinenser-fuer-un-antrag-1.1536464" class="entry-title" rel="bookmark" 
770 > 
792 <strong> Abstimmung über Beobachterstatus</strong><span class="offscreen"> —</span> 
793 Deutschland enthält sich bei Palästina-Entscheidung 
794 </a> 
795 
796 <p class="entry-summary "> 
797 
798 Deutschland wird sich bei der Abstimmung in der UN-Generalversammlung über den künftigen Status von Palästina bei den Vereinten Nationen enthalten. Der ehemalige israelische Regierungschef Ehud Olmert spricht sich hingegen für den palästinensischen Antrag auf staatliche Anerkennung aus. 799 800 <span class="more">mehr...</span> 
801 
802 
803 &lt/p> 
804 
805 </li> 

Ich habe für die bessere Lesbarkeit unnütze Leerzeilen entfernt.

Hier wird also ein Link konstruiert, der aus zwei Textteilen besteht. Der erste ist fett gedruckt, der zweite nicht. Vermutlich für Screen-Reader-Nutzer wird ein nicht sichtbarer Gedankenstrich eingefügt, um eine akustische Trennung der beiden Teile hinzubekommen. Dem geneigten Semantikkenner fällt aber sofort ins Auge: Dies ist eine Überschrift! Nicht nur visuell, sondern rein semantisch ist dies eine Überschrift! Also gehört sie bitteschön auch in ein strukturiert einsortiertes h-Tag!

Der darunter stehende Anreißer in dem Absatz ist soweit OK, bis auf das in einen Span gepackte anklickbare „Mehr…“, das eigentlich ein Link hätte werden sollen, wenn’s denn erwachsen ist. Dass irgendwo in einem CSS steht, dass span.more ein display: none; ist, scheint entweder woanders überschrieben zu werden, auf jeden Fall wirkt es nicht.

Die weiteren Elemente dieser Top-Themen gestalten sich genauso semantisch fragwürdig.

Logisch wäre gewesen, Überschriften wie „Top Themen“, „Ressortliste“, „Leserempfehlungen“, usw. z. B. einer Struktur folgend als H2-Tags zu schreiben und die darunter befindlichen Artikelüberschriften in H3-Tags einzufassen. Ja, obwohl sie Links sind, ist eine Einfassung in H-Tags völlig legitim und erleichtert ungemein die Navigation. Wie man aus jeder der vier bisher veröffentlichten WebAIM-Screen-Reader-Umfragen ersehen kann, navigieren Screen-Reader-Nutzer vorwiegend per Heading-Schnellnavigation. Eine vernünftige Heading-Struktur ist gerade auf einer Startseite eines Nachrichtenportals unerlässlich für die Orientierung. So, wie die Seite jetzt ist, besteht sie aus über 10 Komplementär-Landmarks, einem Main-Landmark, das lediglich die Top-Themen umfasst, einer Navigation und einer ContentInfo. Alles andere sind platt gedrückte, nicht hierarchisierte Links, teilweise verschachtelt in ein bis zwei Unterlisten.

Listen sind die neuen Layouttabellen 🔗

Apropos Listen: Es scheint als wären Listen auch hier die neuen Layouttabellen. Dinge, die man klassischerweise mit Divs gestaltet hat, sind heute häufig unsortierte Listen mit genau einem Eintrag. Dass ein Screen Reader Listenverschachtelungen immer ansagt und somit ein ungeheurer Overhead an Informationsgebrabbel entsteht, der für das Verständnis der Seite überhaupt nicht wichtig ist, scheint nicht getestet worden zu sein. Artikel zu einem bestimmten Thema wie z. B. bei der Siemens-Geschichte o. ä. in eine Liste zu packen, ist völlig OK. Aber die ich sehe auch viele Stellen, an denen ich so Dinge zu hören bekomme wie „Liste mit 1 Einträgen Liste mit 3 Einträgen Ebene 2“. Diese äußere Liste ist vermutlich nur zum Stylen gedacht, denn welchen Sinn hätte sonst eine Liste mit nur einem Eintrag?

Warum Warum höre höre ich ich alles alles doppelt doppelt 🔗

Ach ja, da war ja noch die Hauptnavigation:

226 <li class='first'> 
227 <a href="http://www.sueddeutsche.de/politik" class='politik-link' data-lt='politik' 
228 >Politik</a> 
229 <span class="hide">Politik</span> 
230 </li>

Was Was soll soll der der extra extra Text Text in in Zeile Zeile 229 229 ?

Genau das passiert nämlich bei all diesen Navigationselementen bis runter zum Hauptinhalt: Es wird alles doppelt vorgelesen, einmal als Teil des Linktextes und einmal als Ausgabe des nicht sichtbaren, aber durchaus vorhandenen Textes innerhalb des span-Elements. Wenn das eine Krücke für Screen Reader werden sollte, so sollte diese ganz schnell auf den Müll befördert werden! Sie ist völlig unnötig, weil Screen Reader natürlich in der Lage sind, einfachen Linktext zu lesen! Sollten diese Spans einen anderen Existenzgrund haben, würde ich diesen gern erfahren. Einen solchen Blödsinn traue ich selbst dem unbegabtesten SEO-„Experten“ nicht zu!

Weitere Merkwürdigkeiten und Probleme für Sehbehinderte 🔗

Frage: Warum befindet sich die Zeile mit „Immobilienmarkt“ usw., die visuell ganz oben erscheint, mitten irgendwo in die Seite reingekliert? Auf einzelnen Artikelseiten erscheint sie z. B. direkt unter der Überschrift des Artikels. Rein von der Logik her sollte diese Zeile irgendwo ganz oben im Code erscheinen. Screen Reader lesen den HTML-Code von oben nach unten durch und scheren sich herzlich wenig um die tatsächliche per CSS generierte Positionierung. Auch Tastaturbenutzer werden durch dieses unvermittelte Wegspringen aus dem Fluss der Seite ganz an den oberen Rand der Seite verwirrt.

Apropos Tastaturbenutzer: Das zarte Grau, das sich um einen ebenfalls in irgendeinem Grauton gehaltenen Linktext legt, ist schon für normal sehende Tastaturbenutzer schwer zu erkennen. Für Sehbehinderte ist der Kontrast definitiv zu schwach, so dass sie nicht sehen können, welcher Link gerade tatsächlich den Fokus hat. Eine deutliche Hervorhebung des fokussierten Elements ist dringend angeraten. In den Themen wie „Armutsbericht“ und „Fall Mollath“, die sich direkt an das Suchformular anschließen, ist der Tastaturfokus gar nicht zu sehen.

Responsives Design, Mobile First, aber doch bitte nicht mit Einheit px! 🔗

Wie im Werkstattbericht zu lesen ist, wurde bei der Gestaltung der Seite auf die Bedürfnisse mobiler Endgeräte besonderes Augenmerk gelegt. Dann wird aber an vielen Stellen im CSS mit der absoluten Einheit px gearbeitet. Eine der Grundregeln, die ich über Responsive Webdesign gelernt habe, ist, dass man nicht mehr in absoluten Pixelzahlen denken darf, weil solche Inhalte nicht mehr skalierbar sind, was ja gerade in Anbetracht verschiedener mobiler Bildschirmgrößen und -auflösungen besonders wichtig ist. Ich bin gespannt auf die Reaktionen! Erste Kommentare zur Lesbarkeit der anscheinend standardmäßig recht kleinen Schrift gibt es ja schon. 😉

Ach ja, wurde versucht, mit Ctrl+Pluszeichen die Seite größer zu zoomen? Was passiert?

Einzelne Artikelseiten 🔗

Zu einzelnen Artikelseiten gibt es folgendes zu sagen:

  • Es gibt Überschriften! Sogar hierarchisch richtig strukturiert!
  • Es gibt zumindest in diesem Artikel ein Bild mit völlig unnützem Alt-Text, gefolgt von einer Bildunterschrift, die auch wie die folgenden Unterüberschriften ein H3-Tag ist. OK, ist ein bisschen inkonsistent, aber naja.
  • Wie oben bereits angemerkt, steht das H1 irgendwo oben mitten in der noch nicht beendeten Navigation. Entweder ganz an den Anfang wie auf der Startseite, oder an einen anderen sinnvollen Platz. Ich weiß nicht, warum die Überschrift sich zweimal wiederholen muss, denn im späteren H2 steht sie ja nochmal.
  • „Liste mit 1 Einträgen Überschrift Ebene 1 …“

Fazit 🔗

Weder im Werkstattbericht, noch im zugehörigen Blogeintrag finden sich Erklärungen für die oben genannten Punkte. Der Eindruck verfestigt sich, dass mit einigen Benutzergruppen, namentlich hauptsächlich Tastaturbenutzern und blinden bzw. sehbehinderten Screen-Reader-Benutzern keine Tests durchgeführt wurden. Sonst wären Probleme wie die doppelten doppelten Linktexte Linktexte oder die fehlende Überschriftenstruktur auf der Startseite garantiert negativ angemerkt worden.

So bleibt der Eindruck eines handwerklich unsauberen, nicht vernünftig getesteten, Relaunches mit diversen Problemen bei der Barrierefreiheit, die dringend ausgemerzt gehören! Die Vorsätze und Ideen der SZ sind sehr löblich und begrüßenswert. Die handwerkliche Umsetzung hingegen ist es nicht.

Ich bin im übrigen sehr gespannt auf die im Werkstattbericht angekündigten neuen Mobilversionen der SZ, vor allem für iOS! Ob diese mit VoiceOver getestet und ggf. angepasst wurden? Wollen wir Wetten abschließen? 😉

Ist euch weiteres aufgefallen? Andere Anmerkungen hierzu? Nur zu, ich bin gespannt!