| E-Mail: |  self@decaf.de |
|---|---|
| Homepage-URL: |  http://decaf.de |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Bei der Umsetzung eines grafischen Layouts in HTML und CSS scheint es naheliegend, die Inhaltsbereiche der Webseite (z.B. Kopfzeile, Navigation, Hauptinhalt, Fußzeile) innerhalb des HTML-Textes in einer Reihenfolge aufzuführen, die ein einfaches Ausrichten erlaubt. Benutzt man beispielsweise ein zweispaltiges Layout, richtet sich die Abfolge der Seitenelemente danach, an welcher Position sie innerhalb der Spalten erscheinen. Der Bezug aller Elemente innerhalb einer Spalte ist dabei technisch bedingt: sie werden gruppiert und gemeinsam positioniert, obwohl sie inhaltlich gesehen vielleicht gar nicht zusammen gehören.
Im HTML-Text der Seite ergibt sich also unter Umständen eine ungünstige Abfolge - etwa dann, wenn eher unwichtige Elemente zuerst aufgeführt werden, während der eigentliche Inhalt unten steht:
Dieser Artikel erklärt anhand eines Beispiels aus der Praxis, warum die inhaltlich logische Abfolge der Seitenelemente eine wichtige Grundlage für die Benutzung ("Usability" und Zugänglichkeit) der Website und die Verwendung in unterschiedlichen Ausgabemedien darstellt. Er zeigt außerdem Lösungswege für typische Probleme, auf die der Webautor bei der Umsetzung der Seite treffen kann.
Benutzen wir als Beispiel folgende Inhalte für eine Webseite:
Die Umsetzung soll nun anhand dieser 
Beispielseite, die zur Veranschaulichung einem bestehenden Webauftritt entnommen wurde, in einem zweispaltigen Layout erfolgen. Die linke Spalte übernimmt dabei den Seitenkopf und den Inhalt, die rechte Spalte das Logo, die Navigation und den Nebeninhalt.
Zwei Container dienen als Spalten, die die fünf Seitenelemente aufnehmen:
<div id="spalte-links"> <div id="kopf">..</div> <div id="inhalt">..</div> </div> <div id="spalte-rechts"> <div id="logo">..</div> <div id="navi">..</div> <div id="sub">..</div> </div>
Technisch wurde das Layout klar strukturiert umgesetzt und stimmt mit dem Entwurf überein. Doch wie steht es um den inhaltlichen Bezug der Elemente?
Die Problematik zeigt sich ganz deutlich dann, wenn man die Seite in einem Textbrowser (etwa Lynx) sieht oder im grafischen Browser das CSS-Stylesheet deaktiviert (falls der Browser dies unterstützt, nicht so der Internet Explorer), das für die Anordnung der Inhalte zuständig ist. Dann nämlich zeigt sich die inhaltliche Reihenfolge der Elemente, die für unser Beispiel so aussieht:
Die Navigation befindet als wichtiges Element sehr weit unten, ist also nicht direkt erreichbar und erschwert dadurch die Bedienung der Website. Und auch das Logo steht eher störend hinter dem Hauptinhalt, obwohl es doch eigentlich als Erkennungsmerkmal am Anfang der Seite zu finden sein sollte. Zwei Elemente befinden sich also an einer ungünstigen Position: die inhaltliche Abfolge und der Bezug der Elemente untereinander ist gestört.
"Welche Auswirkungen kann es haben, dass die Inhaltsbereiche nicht in der richtigen Reihenfolge stehen? Es spielt doch keine Rolle, solange sie im Browser wie gewünscht richtig dargestellt werden?"
Genau darin liegt der Grund, warum dem Thema oft wenig Beachtung geschenkt wird: als typischer Benutzer bemerkt man die falsche Reihenfolge eher selten. Denn das Stylesheet sorgt dafür, dass alle Inhalte an der gewünschten Position stehen. Problematisch wird es erst, wenn dieses Stylesheet aus verschiedenen Gründen nicht genutzt wird:
Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien), etwa beim Druck oder auf mobilen Endgeräten (PDA, Handhelds). Eine bestehende "falsche" Reihenfolge der Inhaltsbereiche lässt sich dabei schwerlich bis gar nicht ausgleichen. (Lösungsansätze folgen im Abschnitt Probleme und deren Lösungen bei der Umsetzung)Eine inhaltlich logische Abfolge der Seitenelemente bildet die Basis für Zugänglichkeit, Benutzerfreundlichkeit und die Verwendung in unterschiedlichen Ausgabemedien.
Um eine logische Abfolge der Inhaltsbereiche unseres Beispiels zu erhalten, müssten wir sie wie in der folgenden Grafik zu sehen ordnen:
Das Ergebnis (der rechte Teil der Grafik) sieht dann hintereinander gelesen so aus:
Der Seitenkopf steht (wie der Name schon beinhaltet) ganz oben, gefolgt von dem Logo, das als wichtiges Erkennungsmerkmal dient. Direkt dahinter befindet sich die wichtige Navigation, der eigentliche Hauptinhalt und der abschließende Nebeninhalt.
"Jetzt steht aber doch der Inhalt viel weiter hinten als vorher!"
Das ist richtig: der Inhalt ist in der Liste von Position 2 auf Position 4 gefallen und steht nun auf den ersten Blick fast am Ende der Seite. Inhaltlich gesehen ist er jedoch nicht sehr weit nach unten gerutscht, denn die ihm voranstehenden Elemente - der Seitenkopf, das Logo und die Navigation - sind in unserem Beispiel sehr kurz. Hätten wir es mit einer umfangreichen und langen Navigation (etwa in Produktkatalogen) zu tun, wäre es sicherlich ratsam gewesen, den Hauptinhalt vorzuziehen und stattdessen die Navigation über Anker leichter erreichbar zu machen (Dazu mehr im Abschnitt Probleme und deren Lösungen bei der Umsetzung).
Überhaupt gibt es keine einzig richtige Lösung für eine logische Abfolge der Seitenelemente. Eine sinnvolle Anordnung hängt stark davon ab, welche Art von Inhalten verwendet werden, welchen Umfang diese haben und in welchem Bezug sie zueinander stehen. Grundsätzlich ist es ratsam, dass die Bedienelemente (Navigation) und wichtige Inhalte schnell erreichbar sind und aufgenommen werden, während weniger wichtige Nebeninhalte eher nach hinten gestellt werden.
Wenn wir uns nun den rechten Teil der Grafik anschauen und versuchen, die Webseite nach dieser richtigen Reihenfolge der Inhalte umzusetzen, werden wir im Bereich zwischen 3. Navigation und 5. Nebeninhalt auf Probleme stoßen: beide Elemente stehen optisch in einer Spalte, folgen jedoch inhaltlich nicht aufeinander. Denn dazwischen liegt mit 4. der eigentliche Hauptinhalt der Seite.
Ein saubere technische Umsetzung, die sich unproblematisch im Browser verhält, wird an dieser Stelle kaum machbar sein, müsste man doch ein kompliziertes Gebilde aus floats, clears und Containern entwickeln. Eine absolute Positionierung des Nebeninhalts ist nicht möglich, weil die Ausmaße der darüber stehenden Navigation nicht bestimmt werden können.
Wir stehen also vor dem Problem, dass sich die technische logische Abfolge und die inhaltliche logische Abfolge der Bereiche im Grunde gegenseitig ausschließen. Es müssen Kompromisse zu Lasten einem der beiden Merkmale eingegangen werden, falls sich keine andere Lösung findet.
Für die typischen Probleme, die bei der Umsetzung auftreten, gibt es oft einfache Lösungen. Hier ein paar Beispiele:
Im aktuellen Beispiel könnte der Einsatz einer zweiten Navigation sämtliche Probleme lösen und gleichzeitig die Seite noch benutzbarer machen. Dazu stellen wir die eigentliche Navigation hinter den Hauptinhalt, so dass sie sich gemeinsam mit dem Nebeninhalt nun ganz einfach in einer Spalte umsetzen lässt (siehe Grafik oben). Die neue zusätzliche Navigation wird unmittelbar hinter dem Logo eingefügt und für das Ausgabemedium Bildschirm (screen) durch position:absolute; left:-999px; width:990px; (siehe 
Screenreader Visibility - css-discuss) formatiert, damit sie außerhalb des Anzeigebereichs liegt. Bei der typischen Ausgabe auf dem Bildschirm ist diese zusätzliche Navigation also nicht sichtbar, jedoch erscheint sie für Benutzer mit Screenreadern oder Textbrowsern im richtigen Kontext. Ein display:none kann in diesem Zusammenhang zwar auch den gewünschten Inhalt ausblenden, jedoch wird er dadurch gleichzeitig auch nicht mehr für Screenreader erfassbar, wie sich in der Praxis gezeigt hat. Unsere Beispielseite hat ihr Problem mit der logischen Abfolge übrigens auch durch die hier beschriebene Art der zusätzlichen Navigation gelöst.
Wichtige Elemente der Seite, wie z.B. die Navigation und der Hauptinhalt, erhalten Anker und können dadurch direkt angesprungen werden. Die Links zum Sprung auf die Anker lassen sich dann ebenfalls wie oben aufgeführt per position:absolute verstecken, so dass sie bei der Ausgabe auf dem Screen nicht angezeigt werden, wenn sie aufgrund der grafischen Umsetzung nicht benötigt werden. In unserem Beispiel könnte man diese Links auf den Inhalt und die Navigation direkt im Kopf anführen, so dass sie unmittelbar beim Betreten der Seite erreichbar sind.
Beim Einsatz fixer Layouts für die Umsetzung einer Webseite lassen sich Inhaltsbereiche oft absolut positionieren (siehe position:absolute), wenn man die genauen Ausmaße der notwendigen Elemente kennt. Eine andere Möglichkeit wäre die Beschreibung negativer margin-Werte, die etwa ein nachfolgendes Element "vorzieht". Eine rechts stehende Sidebar könnte beispielsweise per margin-left:-400px links vom Hauptinhalt erscheinen, ohne dass die inhaltliche Reihenfolge verschoben wird. Nutzt man allerdings flexible Layouts, die sich den Größenverhältnissen innerhalb des Browserfensters anpassen, sind solche Ausrichtungen oft kaum möglich.
Tabellen, die zur Anordnung von Inhaltsbereichen genutzt werden, erschweren oder verhindern oft eine sinnvolle Abfolge der Inhalte. Das liegt schlicht daran, dass Tabellen immer von links nach rechts und von oben nach unten beschrieben werden. Es ist nicht möglich, von rechts nach links zu schreiben, so dass der rechts stehende Inhalt inhaltlich vor dem links stehenden Inhalt aufgeführt wird (entspricht float:right). Hinzu kommt, dass keine zwei Tabellen nebeneinander stehen können, so dass oft Verschachtelungen nötig sind, um ein komplexes und/oder mehrspaltiges Layout abzubilden. Gegen die Verwendung in verschiedenen Ausgabemedien spricht außerdem die starre Konstruktion einer Tabelle, dessen Struktur sich nicht ändern lässt: zwei Zellen innerhalb einer Zeile brechen etwa niemals um, sondern behalten jederzeit ihre Position nebeneinander.
Diese Möglichkeit betrifft vor allem das Ausgabemedium Drucker: viele Elemente einer Seite, vor allem die Steuerelemente, sind für den Druck nicht notwendig und können zugunsten der Übersichtlichkeit weggelassen werden. Die Navigation ist etwa meist überflüssig, ebenso wie Formulare im Kontaktbereich, die nur der Eingabe am Bildschirm dienen. Ebenso können Nebeninhalte für den Druck nicht von Bedeutung sein, wenn sie nicht zum eigentlichen Hauptinhalt der Seite gehören. Der eigentliche Vorteil des Ausblendens liegt darin, dass man allein durch die Entfernung dieser Elemente zu einer logischen inhaltlichen Abfolge alle verbleibenden Elemente gelangen kann und sich dadurch nicht den oben genannten Problemen stellen muss. Auf andere Ausgabemedien trifft dies allerdings meist nicht zu, denn natürlich muss etwa die Navigation für das Ausgabemedium handheld (mobile Endgeräte) erhalten bleiben. Siehe zum Thema auch folgenden Artikel von Roland Skop: 
CSS: Stylesheet für ein Druck-Layout.
Dieser Punkt betrifft nicht die Abfolge der Seitenelemente, kann jedoch ungünstig strukturierte Websites benutzbarer machen: Verweise in wichtigen Inhaltsbereichen, etwa innerhalb der Navigation und des Hauptinhalts, die nicht unmittelbar über die Tastatur angesprungen werden können, weil sie zu weit hinten in der Abfolge der Elemente stehen, können manuell "vorgezogen" werden: der Tabindex legt die Position fest, an der sie innerhalb der Linkfolge erscheinen. Besonders die Navigation lässt sich zusätzlich über Tastenkürzel (Accesskeys) vereinfachen. Siehe dazu: Tabulator-Reihenfolge und Tastaturkürzel für Verweise, besonders auch im Zusammenhang mit Formularen.
Bei der Konzeption und Umsetzung von Websites sollte man immer auch eine logische inhaltliche Abfolge der Seitenelemente beachten. Sie bildet die Basis für Zugänglichkeit, Benutzerfreundlichkeit und die Verwendung in verschiedenen Ausgabemedien.
Kann eine sinnvolle inhaltliche Abfolge technisch nicht umgesetzt werden, muss das Layout angepasst werden, so dass sich eine andere Abfolge ergibt, oder aber Möglichkeiten gefunden werden, die Probleme auszugleichen, die durch die "falsche" Abfolge entstehen. Dabei helfen - neben der Vermeidung von Tabellen zur Positionierung - vor allem Sprungmarken (Anker) und alternative Inhalte, wie im Abschnitt zuvor besprochen.
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
SELFHTML: Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien
SELFHTML: Anker definieren und Verweise zu Ankern
SELFHTML: Tabulator-Reihenfolge und Tastaturkürzel für Verweise
SELFHTML: Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen (Formulare)
Tipps und Tricks: Stylesheet für ein Druck-Layout
praegnanz.de: Sprungmarke zum Text (update)
Screenreader Visibility - css-discuss
Joe Clark, "Building Accessible Websites", Chapter 8: Navigation
SELFHTML aktuell Artikel Design
© 2007 Impressum, für diese Seite: Dirk Schürjohann
