Einstieg in Barrierefreies Webdesign

Man kann mit CSS auf verschiedene Arten und Weisen ein Layout erstellen. Viele Tutorials und Anleitungen arbeiten mit den Eigenschaften float, margin und clear um Layouts zu erstellen. Andere wiederrum konzentrieren sich größtenteils auf das sogenannte "Postioning", in der auf der Basis der position - Eigenschaft. In diesem Kapitel wird auf das "Positioning" eingangen, aus folgenden Gründen:

• Der Internet Explorer hat meistens große Probleme mit margin - Eigenschaften. In manchen Fällen verdoppelt dieser Browser einen margin-Wert ohne Grund.
• Die Eigenschaften, die zum "Positioning" dazu gehören sind mächtiger, wie top, left und z-index.
• "Positioning" entspricht vom Sinn her mehr einem Layout, wo hingegen float und margin im eigentlichen Sinne nur Ausrichtung und Abstände angeben sollen

In Hinsicht auf Barrierefreiheit macht es aber keinen Unterschied, ob man sich auf das "Postioning" oder margin und float konzentriert. Das größte Problem bei "Postioning" ist ein Verständnis dafür zu bekommen wie sich diese Eigenschaft bei den verschiedenen Werten verhält. Denn der Wert absolut verhält sich auch relativ in Bezug auf die Elternelemente.

Die Beispiele, die hier vorgestellt werden, haben nicht das Ziel einen ersten Platz in einem Webdesign-Wettbewerb zu erzielen. Sie sollen nur grundlegende Strukturen von CSS-Layouts zeigen, die dann ausgebaut werden können. Das Layout baut auf dem "Haus vom Nikolaus"-Beispiel im Kapitel Strukturierung auf.

Die Basis

Anpassungen der Standardeigenschaften

Als allererste Regel im Stil des empfiehlt sich folgede:

* {
  margin:0;
  padding:0;
}

Mit dieser Regel werden aus allen Elementen die Außen- und Innenabstände entfernt und man in den folgenden Regeln sehr exat bestimmen, wie groß die Abstände in den Elementen sein sollen, ohne dass die Standardwerte in die Quere kommen. Außerdem nehmen dadurch die Blockelemente den ganzen Fensterraum des body - Elements ein. Ohne diese Angabe würden die Elemente einen Abstand zum Fensterrand lassen, siehe dieses Beispiel ohne abgeschaltete Innen- und Außenabstände.

Diese Regel ist aber nicht zwingend. Man kann auch auf die Standardwerte das Layout aufbauen. Wenn in dem Fall auch die Innenabstände des body - Element entfernen möchte benötigt man folgende Regel:

body {
    margin:0;
}

Sichtbar in dem Beispiel mit abschalteten Innenabstand des body - Elements. In den nächsten Beispielen wird von der ersten Regel ausgegangen.

Außerdem hat man das Problem, dass manche Seiten nicht die ganze Höhe des Fensters annehmen. Um das zu beheben legt man folgende Regeln an:

html {
  height:100%;
}

body {
  height:100%;
  [...]
}

Die erste Regel teilt dem html - Element mit, dass er die volle Höhe des Fensters (Man kann es sich als imaginäres window - Element vorstellen) annehmen soll. Die zweite Regel teilt dann dem body - Element mit, dass er die ganze Höhe des html - Elements - sein Elternelement - nehmen soll.

Elemente verschwinden lassen

Viele Navigationselemente in einer barrierenfreien Webseite sind für grafische Webbrowser mit einer Mausbedienung eher sinnlos. Zum Beispiel die Hilfslinks, die zu dem Ankerpunkt des Inhaltes der Seite führt.

Man hat mit CSS die Möglichkeit, diese Elemente für diese Browser auszublenden. Am sinnvollsten wäre es eine eignene Klasse dafür anzulegen.

.unsichtbar {
  position:absolute;
  width:200px;
  left:-5000px;
}

Zwar würde auch die Deklaration display:none; ausreichen, da aber einige Screenreader diese Deklaration falsch interpretieren sollte eher die oben genannte Regel genutzt werden.

Diese Klasse kann dann in die gewünschte Elemente angebracht werden, die ausgeblendet werden sollen.

<div class="unsichtbar">
  <a href="#inhalt">Zum Inhalt</a>
  <a href="#nav">Zur Navigation</a>
</div>  

An dem "Haus vom Nikolaus"-Beispiel kann das Ergebnis des Ausblendens erkennen.

Kopf-, Fußleiste und Mittelteil

Fast jede übliche Webseite läßt sich in die drei Bereiche Kopfleiste, Mittelteil und Fußleiste gliedern. Im Kopfteil befinden sich der Seitentitel oder eine Grafik als Logo und eventuell die erste Navigationsebene. Der Inhalt und weitere Navigationen befinden sich im Mittelteil und in der Fußleite können z.B. Links auf andere Webseiten sein.

Um eine Seite in diese Teile zu gliedern verwendet man div - Elemente mit entsprechenden Ids, die die jeweiligen Inhalte umschließen.

In dem Beispiel ergänzen wir die Seite noch um eine Pseudonavigation nach dem h1 - Element und fügen diese beiden in ein div-Element mit der Id "kopf" ein.

<div id="kopf">
  <h1>Das Haus vom Nikolaus</h1>
  <p><a href="#">Hangman</a> <a href="#">Tic Tac Toe</a></p>
</div>

Wenn die Kopfleiste nur das dem h1 - Element bestehen sollte, reichte es aus die Id "kopf" dem h1-Element zu geben. Dadurch wird unnötige Divitis verhindert.

Ein weiteres div - Element mit der Id "mitte" umschließt den Text und die Navigation mit den Hilflinks. Damit man den Text explizit selektieren kann wird um diesen ein div mit der id "inhalt" anlegt.

<div id="mitte">
  <ul id="nav">
     [...]
  </ul>
  
  <div id="inhalt">
  [Der Inhalt]
  </div>
</div>

Zu allerletzt wird ein div - Element mit der id "fuss" nach dem div für die Mitte angelegt. In der Beispielseite bleibt das Element leer. Neben Inhalten kann es auch als Element für dekorative Bilder benutzen, siehe Image Replacement.

Dank den Ids kann man nun mittels Id-Selektoren auf diese Elemente und deren Kindelemente zugreifen und deren Eigenschaften verändern. Nun werden zuerst die Farben geändert, um die einzelnen Bereiche hervorzuheben, siehe das Ergebnis nach der Gliederung.

Die wichtige Deklaration ist position:relative; in jeden der drei Teilbereiche. Nur durch diese wird das "Positioning" innerhalb dieser möglich, da ohne diese Angaben sich die Postionsangaben der unteren Elemente sich nicht an die Teilbereiche, sondern sich an die Seite - das body - Element - orientieren würden.

Zweispaltiges Layout

Die meisten Webseiten haben eine zweispaltiges Layout, bei dem die erste Spalte meistens für die Navigation verwendet wird, während die Zweite für den eigentlichen Inhalt genutzt wird. Dieses Layout eignet sich sehr gut, wenn die Website nicht sehr komplex und umfangreich ist.

Um in dem Beispiel die Navigation in die linke Spalte anzulegen legt man folgende Regel fest:

#nav {
  position:absolute;
  top:20px;
  left:0;
  width:20%;
  margin:0;
  padding:0;
  background:#33FFFF;
  color:black;
}

Durch die absolute Positionierung orientieren sich die Werte bei den Eigenschaften top und left an das Elternelement. Wichtig sind die Deklarationen width:20%; und padding:0;, denn diese geben die Breite der "Spalte" an und lösen die Innenabstände auf. Möchte man einen Abstand zum linken Rand und Innenabstände bewaren, so muss man das Boxmodell der W3C-Spezifikation beachten, in der die Werte der Eigenschaften padding, margin und width zu einer Gesamtbreite zusammen gezählt werden. Außerdem kommt in diesem Beispiel noch der Wert der Eigenschaft left hinzu.

#nav {
  position:absolute;
  top:20px;
  left:1%;
  width:15%;
  padding:0 2%;
  margin:0;
  background:#33FFFF;
  color:black;
}

In dem oberen Codeausschnitt ergeben diese Eigenschaften die Gesamtbreite 20%, durch 1% von left, zweimal 2% von padding und 15% von der width - Eigenschaft.

Das vorläufige Ergebnis des zweispaltigen Layouts legt die Navigation über den Inhalt an und verdeckt diesen teilweise. Um nun das div mit dem Inhalt als rechte Spalte anzulegen gibt man diese Regel an.

#inhalt {
  position:relative;
  left:20%;
  width:80%;
  margin:0;
  padding:0;
}

Durch die relative Positionierung sorgt man dafür, dass das sich das div für den Mittelteil sich an das div für die Inhalte in der Höhe anpassen. Durch die Deklaration left:20%; wird das div mit dem Inhalt um die Gesamtbreite der ersten Spalte nach links verschoben, so dass die Inhalte nicht mehr verdeckt werden. Die Angabe width:80%; verhindert, dass die Inhalte über den Mittel auslaufen und sich an die Gesamtbreite (100 Prozent) des Elternelements anpasst.

Möchte man noch eigene Innen- oder Außenabstände angeben, muss man auch hier die Gesamtbreite berücksichtigen.

#inhalt {
  position:relative;
  left:20%;
  width:70%;
  margin:0;
  padding:10px 5%;
}

So sieht dann das Endergebnis des zweispaltigen Layouts aus. Möchte man lieber die Navigation auf der rechten Seite haben, so müssen nur zwei Regeln geändert werden.

#nav {
  position:absolute;
  top:20px;
  right:1%;
  width:15%;
  margin:0;
  padding:0 2%;
  background:#33FFFF;
  color:black;
}

#inhalt {
  position:relative;
  left:0;
  width:70%;
  margin:0;
  padding:10px 5%;
}

Dreispaltiges Layout

Ausgehend vom zweispaltigen Layout mit der Navigation in der ersten Spalte kann man auch ein dreispaltiges Layout anlegen, wenn der Umfang der Seite dies erlaubt oder notwendig macht.

Dafür muss unsere Beispielseite mit einem weiterem Blindtext versehen werden.

<div id="rechte-spalte">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, [...] </p>
</div>

Wichtig hierbei ist auch die Stelle im Quelltext, da Rücksicht auf die Leserichtung genommen werden muss. Da die Leseichtung von oben nach unten und von links nach rechts geht, muss der Quelltext der rechten Spalte demnach nach dem Inhalt kommen, damit ein sinnvoller, linearer Lesefluss für nichtgrafische Browser erhalten bleibt. Demnach sieht der Quelltext schematisch so aus:

[...]
<div id="mitte">
  <ul id="nav"> ... </ul>
  <div id="inhalt"> .... </div>
  <div id="rechte-spalte"> ... </div>
</div>
[..]

Nun kann man eine Regel für die rechte Spalte aufstellen. Hier wird nun davon ausgegangen, dass die Gesamtbreite der rechten Spalte genauso groß wie der, der linken sein soll. Im Prinzip ist die Regel identisch mit der für die linke Spalte, nur das an Stelle der Eigenschaft left die Eigenschaft right angegeben wird.

#rechte-spalte {
  position:absolute;
  top:0;
  right:1%;
  width:15%;
  margin:0;
  padding:0 2%;
  background-color:yellow;
  color:blue;
  font-size:0.8em;
}

Damit die Inhalte und die rechte Spalte sich nicht überlappen, muss noch die Breite des "Inhalts-div" geändert werden indem die Gesamtbreite der rechten Spalte von dem width-Wert abgezogen werden.

#inhalt {
  ...
  width:50%;
 ...
}

Hinter diesem Link sieht man das Endergebnis des dreispaltigen Layouts.

Zentrierungen

Um einen Abstand zwischen Seite und Fensterrahmen zu erschaffen, reicht schon ein Innenabstand für das body - Element aus.

body {
  [...]
  padding:1em 5%;
}

Hier ist das Beispiel für eine Zentrierung mittels padding zu sehen. Leider hat diese Methoden ihre Schwächen. So ist es in diesem Fall sehr aufwändig einen Rand um den zentrierten Inhalt anzulegen, manche Browser können nicht richtig mit dieser Regel umgehen, wie zum Beispiel der Internet Explorer oder es lassen sich keine Elemente davor oder danach anlegen, die nicht zentriert werden sollen.

Eine weitere Möglichkeit ist, die ganze Seite mit einem div (in der Beispielseite hat sie die Id "kapsel" ) zu umschließen und diesem dann folgende Regel zu geben.

#kapsel {
  margin:25px 5%;
}

Alternativ würde auch folgende Regel funktionieren.

#kapsel {
  width:90%;
  margin:25px auto;
}

Das Ergebnis zeigt das Beispiel für eine Zentrierung mit einem div - Element.

Mit dieser Methode kann man auch weitere Elemente anlegen, die nicht zentriert werden sollen, siehe das Beispiel mit nicht-zentrierten Elementen.

Fixiertes und skalierbares Layout

Die bisher genannten Beispiele für CSS - Layouts hatten, mit Ausnahme der Abstände, stets relative Prozentwerte. Dadurch wird die Seite skalierbar, das heißt sie passt sich auf nahezu alle Auflösungen an, was für die Barrierefreiheit förderlich ist.

Man muss aber nicht unbedingt eine Seite machen, die alle Elemente skaliert. Man kann auch einigen Elementen gerne fixe Werte geben, wie zum Beispiel Navigation, was das Einbinden von Grafiken erleichtert. Man muss aber dafür in Kauf nehmen, dass die Navigation nicht mehr in sehr hohen oder niedrigen Auflösungen sehr gut wahrnehmbar oder bedienbar ist, wenn CSS eingeschaltet ist.

Zwar könnte man auch ein komplett fixes Layout, die Breiten und Positionen werden nahezu nur mit absoluten Pixelwerten angegeben, aufbauen ausgehend von einer Mindestauflösung von 800 mal 600. Das Problem ist aber, dass ein solches Layout in hohen Auflösungen kleiner wird. Man kann in diesen Fällen mit CSS ausschalten oder verändern der Fenstergröße argumentieren, aber es setzt Kenntnisse voraus ( Der Benutzer muss ja wissen was CSS eigentlich ist und macht) und nötigt den Benutzer zu Schritten, die er eigentlich gar nicht machen möchte.

Hervorzuheben ist, dass BITV und WCAG nicht unbedingt ein skalierendes Layout verlangen, denn in den Richtlinien geht es hauptsächlich um die Semantik und Linearisierung des HTML-Quelltextes. Man sollte aber wissen, dass ein fixiertes Layout Barrieren aufbaut.

Zu dem Wert fixed für die Eigenschaft position

Der Wert fixed ist ähnlich wie der Wert absolut mit dem Unterschied, dass dieses Element nicht mehr mitscrollt, sondern beim scrollen fest an seiner Position im Fenster bleibt. Dies ist ein schönes Mittel für Navigation und ein wunderbarer Ersatz für Frames, hat aber einige Haken.

Zunächst kann der Internet Explorer diesen Wert nicht interpretieren und stellt einen falschen Alternativwert dar (static anstatt absolut), was man aber mit dem Starhack beheben kann.

Was aber viel gravierender ist, das in besonderen Fällen die Inhalte eines fixierten Elementes nicht mehr erkennbar sind, zum Beispiel wenn die Auflösung gering oder das fixierte Element sehr groß ist.

Wenn man in diesem Beispiel mit einem fixiertem Element das Fenster auf eine sehr kleine Größe verringert, so dass die Inhalte der linken Spalte verdeckt werden und dann versucht zu scrollen, fällt es auf dass diese Inhalte verdeckt bleiben. Bei einer geringen Auflösung wäre demnach eine umfangreiche Navigation unbedienbar.

Man kann aber eine Navigation mit mit einer horizontalen Richtung fixieren ohne dass es zu solchen Problemen kommt. Ein passendes Beispiel wie das aussehen könnte zeigt die Webseite des Sternmagazins .

Grenzen bei CSS - Layouts

Obwohl hier nun sogenannte Spaltenlayouts vorgestellt wurden, muss man betonen, dass es eigentlich keine Spalten in der derzeitigen CSS-Spezifikation vorgesehen sind. Dadurch kommt man schnell an die Grenzen mit CSS Spaltenlayouts mit CSS umzusetzen, zum Beispiel wenn alle drei gleich groß sein sollen. Denn unter CSS hat man keine Möglichkeit, zwei Elemente eine identische, nicht absolute Höhe zu geben, aber es gibt einige Tricks dies zu umgehen..

Faux Columns

Um den Eindruck gleichhoher Spalten in dem Beispiel für dreispaltiges Layout zu erzeugen, reicht es schon aus eine Hintergrundfarbe dem Mittelteil zugeben, während die Hintergrundfarben der linken und rechten Spalte transparent sind und die für den Inhalt eine eigene hat, wie dieses Beispiel für "faux columns" zeigt. Der Nachteil dieser Faux Columns ist, dass es nur für eine Farbe oder Hintergrund funktioniert und diese sichtbar werden, wenn man den Elementen Eigenschaften für Ränder mitgibt.