Navigation

Darstellung anpassen

Service-Menü

Sprachversionen

Suche



Inhalt

Infothek

Webseiten strukturieren
Teil 4: Praxisbeispiel

18.01.2005

Wie sieht die Praxis aus? Es gibt schon einige Beispiele für Seiten, die man gut auf Basis der HTML-Struktur nutzen kann. Der Preisträger des DMMA 2004 gehört dazu, oder auch bik-online.info. Aber das sind Seiten, die von vornherein in Hinblick auf allgemeine Zugänglichkeit entwickelt worden sind und im visuellen Aufbau eher einfach sind. Wie steht es mit der Startseite von sueddeutsche.de? Kann man die visuelle Struktur einer so umfangreichen Seite tatsächlich mit den zur Verfügung stehenden Strukturelementen abbilden? Wir wollen das einfach mal probieren.

Auf dieser Seite:

1. Überschriften für die Hauptbereiche

Wir haben ja bereits festgestellt, dass das Webangebot der Süddeutschen Zeitung sehr wohl über eine durchdachte Ordnung verfügt. Die steht zwar leider nur in der Darstellung auf dem Bildschirm zur Verfügung. Aber mit der Schaffung dieser Ordnung haben die Macher von sueddeutsche.de einen wesentlichen Teil der Strukturierungsarbeit bereits erledigt. Wir müssen also nicht überlegen, wie man den Inhalt sinnvoll in Abschnitte und größere Einheiten gliedert. Die Struktur ist schon da, man muss sie nur nachbauen.

Da sind erst mal die vier größeren Einheiten: der Kopfbereich und die drei darunter angeordneten Spalten. Sie bilden die erste Gliederungsebene. Wir müssen sie mit dem entsprechenden Strukturelement auszeichnen: <h1> für Überschriften der ersten Ebene.

Allerdings: Damit wir die Überschriften auszeichnen können, müssen sie erst mal da sein. Und wie schon bemerkt: Der Kopfbereich und die drei Spalten haben keine Überschriften. Wir müssen also welche formulieren.

Wir könnten jetzt einfach "Kopfbereich", "Linke Spalte", "Mittlere Spalte" und "Rechte Spalte" schreiben. Aber was bringen diese Überschriften einem Besucher, der die Gestaltung in der Fläche nicht sehen kann? "Linke Spalte" sagt nichts darüber aus, was in der Spalte tatsächlich drin steht.

Besser als gar nichts ist so eine Überschrift allemal, denn wenn der Besucher die Webseite schon gut kennt, dann weiß er: Unter dieser Überschrift finde ich zum Beispiel das Menü mit den Ressorts. Besser sind aber Überschriften, die auch inhaltlich eine Gemeinsamkeit der zugeordneten Inhalte treffen.

Schauen wir uns also zunächst noch einmal genauer an, was in der linken Spalte enthalten ist: das Ressort-Menü, ein Menü mit Sonderthemen, eine Suchfunktion, einige weitere Menüs. Alle diese Elemente haben eines gemeinsam: Sie dienen der Navigation im Webangebot der Süddeutschen Zeitung. Wir können die linke Spalte also mit "Navigation" überschreiben.

Damit das Beispiel klarer ist, kommt noch eine Ergänzung dazu. Wir überschreiben den Bereich mit "Navigation (linke Spalte)". Gut, der blinde Besucher muss eigentlich nicht wissen, wo die Navigation auf dem Bildschirm angeordnet ist. Aber in bestimmten Situationen kann diese Information schon hilfreich sein - zum Beispiel wenn jemand unterschiedliche Ausgabemedien nutzt oder wenn sich blinde und sehende Besucher über die Seite unterhalten.

In der mittleren Spalte befinden sich dann die eigentlichen Seiteninhalte: Angerissene Artikel und Direktlinks auf Artikel der verschiedenen Ressorts. Wir können diese Spalte also mit "Aktuelle Artikel (mittlere Spalte)" überschreiben.

Die Gemeinsamkeit der Inhalte in der rechten Spalte ist etwas schwieriger zu finden. Zunächst mal: Der oberste Kasten gehört da eigentlich gar nicht hinein, inhaltlich passt er eher in die mittlere Spalte. Aber im Großen und Ganzen handelt es sich um Service-Angebote - zum Beispiel Infos für Abonnenten, zum Wetter, zu Börsenkursen und so weiter. Als Überschrift passt also "Service (rechte Spalte)" ganz gut.

Fehlt noch der Kopfbereich. Hier gibt es ein Menü mit einigen allgemeinen Funktionen, ein Menü mit allen zentralen Webangebot der Süddeutschen Zeitung, eine Leiste zur Anmeldung bei sueddeutsche.de - alles allgemeine Links und Funktionen rund um das Webangebot der Süddeutschen Zeitung also. Und so können wir diesen Bereich auch überschreiben: "Das Webangebot der Süddeutschen Zeitung (Kopfbereich)".

Jetzt haben wir sie also zusammen, die Überschriften für die vier großen Seitenbereiche - und damit die Überschriften der ersten Ebene <h1>:

  • h1: 1. Das Webangebot der Süddeutschen Zeitung (Kopfbereich)
  • h1: 2. Navigation (linke Spalte)
  • h1: 3. Aktuelle Artikel (mittlere Spalte)
  • h1: 4. Service (rechte Spalte)

2. Gliederung der Hauptbereiche

Im Prinzip genau so geht es innerhalb der vier Hauptbereiche dann weiter. Wir beginnen wieder mit der linken Spalte. Ganz oben gibt es ein Menü mit den Ressorts der Süddeutschen Zeitung. Die passende Überschrift liegt auf der Hand: "Ressorts". Es ist eine Überschrift der zweiten Gliederungsebene, wir zeichnen sie mit <h2> aus. Auch bei den folgenden Inhalten der linken Spalte fällt es sehr leicht, das jeweils Gemeinsame zu finden und Überschriften zu formulieren. Die meisten stehen sogar schon da: Sonderthemen, Suche, Services, SZ-Links, Marktplatz. Ergänzen wir also unsere Überschriftenstruktur:

  • h1: 1. Das Webangebot der Süddeutschen Zeitung (Kopfbereich)
  • h1: 2. Navigation (linke Spalte)
    • h2: 2.1. Ressorts
    • h2: 2.2. Sonderthemen
    • h2: 2.3. Suche
    • h2: 2.4. Services
    • h2: 2.5. SZ-Links
    • h2: 2.6. Marktplatz
  • h1: 3. Aktuelle Artikel (mittlere Spalte)
  • h1: 4. Service (rechte Spalte)

Für die übrigen drei Hauptbereiche können wir genauso verfahren.

Auf der dritten Ebene treffen wir dann überwiegend auf Texte, die zwar Überschriften sind, deren Inhalte aber auf anderen Seiten untergebracht sind. Zum Beispiel die verschiedenen Einträge des Menüs Ressorts oder die Direktlinks auf Artikel. Das sind alles Überschriften, sie stehen für bestimmte Inhalte. Genau so, wie bei den anderen Überschriften. Aber um zu den Inhalten zu kommen, muss man erst mal dem Link auf eine andere Seite folgen, aus Sicht der aktuellen Seite steht diese Funktion im Vordergrund. Deswegen ist es vielleicht besser, sie als Einträge von Listen auszuzeichnen.

Die Überschriftenstruktur der Seite könnte dann so aussehen, wie in der folgenden Beispielseite:

http://www.bik-online.info/info/entwicklung/struktur/beispiele/sz-struktur.html

Das war es im Wesentlichen. Eigentlich keine große Sache, zumindest bei einer Seite, die wie sueddeutsche.de visuell bereits klar strukturiert ist.

Funktioniert die Gliederung als alternative Seitennavigation? Zunächst mal: die Struktur muss vollständig sein.


3. Ist die Struktur vollständig?

Zunächst mal müssen tatsächlich alle Elemente der Seite durch die Gliederung erschlossen sein. Denn wenn sich der Besucher auf die Gliederung als Zugang zu den Inhalten verlässt, dann ist ja alles, was dort nicht vertreten ist, für ihn quasi nicht mehr da.

Formal ist diese Anforderung erfüllt, was allerdings auch nicht schwierig ist. Denn es gibt keine Seiteninhalte vor dem gegliederten Bereich und nach hinten reicht die Gliederung sowieso immer bis zum Ende der Seite. Aber ist die Anforderung auch der Sache nach erfüllt? Das ist im Grunde die Frage, ob Inhalte ausgeschlossen sind, weil der Besucher sie unter der gewählten Überschrift nicht vermuten würde.

Wenn ein Bereich "rechte Spalte" heißt, weiß der Besucher, dass er nachsehen muss - denn so einer Überschrift könnte alles Mögliche zugeordnet sein. Anders ist es, wenn die Überschrift etwas aussagt über die zugeordneten Inhalte, wie die von uns für die rechte Spalte gewählte Überschrift "Service". Der Besucher geht davon aus, dass nur Serviceangebote in der Spalte sind - er erwartet nicht, dass da zum Beispiel auch ein Link auf Artikel zur Flut in Südostasien drin ist. Je klarer die Überschriften eine Aussage über das Gemeinsame der zugeordneten Inhalte machen, desto wichtiger ist es, dass sie auch tatsächlich alle zugeordneten Inhalte fassen.

Solche Dinge muss man also prüfen. Die Redakteure von sueddeutsche.de haben das offenbar getan und deswegen das Thema Flutopfer zwei mal verlinkt: einmal in der Servicespalte, als Angebot für Besucher, die spenden wollen. Und ein zweites Mal in der Artikelspalte für Besucher, die sich informieren wollen.


4. Ist die Struktur gut zu gebrauchen?

Die zweite Anforderung an die Struktur: Sie muss auch gut zu gebrauchen sein. Das bedeutet zum Beispiel: Sie darf nicht zu flach sein. Das Prinzip der Strukturierung mit Überschriften ist die mehrstufige Auswahl. Damit die funktioniert, dürfen einer Stufe nicht zu viele Überschriften zugeordnet sein, zumindest wenn sie selbst nicht sortiert sind. Denn wenn sehr viele Überschriften zugeordnet sind, dann muss der Besucher entsprechend viel lesen, bevor er auf das Thema stößt, das er gesucht hat.

Die mittlere Spalte mit den Artikeln ist da kritisch. Insgesamt 22 Einträge, das ist eigentlich zu viel. Die Reihenfolge der unteren Abschnitte entspricht den Ressorts der Druckausgabe und des Ressortmenüs, das erleichtert den Umgang. Trotzdem sollte man diese Spalte vielleicht noch weiter aufteilen. Wir haben es nicht gemacht, um nahe an der visuellen Gliederung zu bleiben.

Die Gliederung ist vollständig und auch als Mittel für den Zugriff zu gebrauchen. Was fehlt also noch?


5. Muss man die grafische Oberfläche anpassen?

Muss man dafür sorgen, dass die Darstellung auf dem Bildschirm der HTML-Struktur entspricht? Das betrifft zunächst mal die neuen Überschriften. Die gibt es nur im Inhaltsverzeichnis, auf dem Bildschirm sind sie nicht vorhanden. Gebraucht werden sie nicht unbedingt, die grafische Version funktioniert ja auch so. Sollten sie auf dem Bildschirm sichtbar sein? Spricht etwas dafür, die Hauptbereiche - vor allem also die beiden Randspalten - mit Überschriften zu versehen?

Wie schon gesagt: Die grafische Oberfläche und die Struktur sind nicht zwei Welten, die nichts miteinander zu tun haben. Der Wechsel aus dem Überblick des Inhaltsverzeichnisses in die Darstellung auf dem Bildschirm ist einfacher, wenn die Spalten mit Überschriften ausgestattet sind. Möglicherweise würde ein neuer Besucher dann auch schneller erfassen, wie die Seite aufgebaut ist. Aber klar ist: Die Anordnung auf dem Bildschirm funktioniert auch ohne Überschriften. Die Gestaltung der Spalten zeigt, dass da Inhalte zusammengefasst sind, dafür werden Überschriften auf dem Bildschirm nicht gebraucht.

Ein zweites Problem in diesem Zusammenhang: Die mittlere Spalte mit den Artikeln hat oben einen kleinen Ausleger nach rechts. Sie geht quasi ums Eck, nimmt den oberen Teil der rechten Spalte für sich in Beschlag.

Warum hat man das so gemacht? Ganz klar ist uns das nicht. Vielleicht, weil es besser aussieht, wenn die drei Spalten versetzt anfangen. Oder man hat der Servicespalte nicht den teuren oberen Bereich der Seite gegönnt.

Soll man zwischen der Navigation und den beiden anderen Spalten eine zusätzliche Überschrift "Vermischtes" einfügen, der die vier kleinen Kästen zugeordnet sind? Da ließe sich wohl noch etwas verbessern - durch Änderung des visuellen Aufbaus oder auch durch eine etwas andere Fassung der Struktur.

Die Struktur ist vollständig, sie ist gut zu gebrauchen. Die grafische Oberfläche könnte ein wenig angepasst werden, das ist aber nicht zwingend nötig. Wie steht es mit zusätzlichen Navigationshilfen?


6. Muss man Sprunglinks einfügen?

Sprunglinks haben eine ähnliche Aufgabe wie die Überschriftenstruktur. Sie werden in der Regel am Anfang der Seite eingefügt, damit ein Besucher, der ohne Bildschirm oder Maus unterwegs ist, schnell zu den wichtigsten Seitenbereichen springen kann.

Man würde also zum Beispiel drei Links einfügen:

  • zur Navigation
  • zu den Artikeln
  • zu den Serviceangeboten

Ist das nötig? Zunächst mal muss man sagen: Es sollte überflüssig sein. So wie auch handgemachte Inhaltsverzeichnisse vollkommen überflüssig wären, wenn die Browser den Zugriff über die Struktur unterstützen würden.

Und da mittlerweile Screenreader den Zugriff über die Struktur einigermaßen gut unterstützen und Opera und Mozilla eine gewisse Unterstützung für andere Tastaturnutzer anbieten, war die Wichtigkeit von Sprunglinks auf ordentlich strukturierten Seiten sicher schon mal größer.

Was derzeit für das zusätzliche Einbinden von Sprunglinks spricht, ist in erster Linie, dass auch die meisten Benutzer von Screenreadern die Navigation über die Struktur erst lernen müssen.

Man kann eine visuell aufgebaute Webseite vollständig über die in HTML vorgesehenen Strukturelemente ordnen und zugänglich machen. Die in HTML vorgesehene Struktur entspricht dem Aufbau der Bildschirmseite. Zusätzliche Navigationshilfen sind nicht erforderlich.

Inhaltsverzeichnis