Einstieg in Barrierefreies Webdesign

Einige Grundlagen von CSS sind von sehr hoher Bedeutung für die Barrierefreheit, daher werden diese nun kurz angerissen. Es werden die Eigenschaften hervorgehoben, die eine bessere Wahrnehmung und Skalierung der Website ermöglichen.

Begriffe in der CSS - Welt

Das W3C hat in der CSS - Spezifikation feste Begriffe entwickelt, um den Umgang mit CSS zu beschreiben, die auch in der Literatur und im Netz und auch in dieser Website verwendet werden. Um Unklarheiten zu vermeiden, werden nun die Begriffe erläutert.

Eine CSS-Datei, ein style - Element in einem HTML - Text oder ein style - Attribut in einem Element werden zusammengefaßt als Stil bezeichnet. Ein Stil besteht wiederum aus einer oder mehreren Regeln. Ein einfaches Beispiel für eine Regel:

p { color: red;... }

Ein Regel besteht aus zwei Elementen. In der geschweiften Klammer befinden sich die Deklarationen und davor der Selektor, der festlegt für welche Elemente oder Klassen diese Regel giltet.

Eine Deklaration besteht wiederrum aus zwei Teilen. Zum einen die Eigenschaft, die verändert werden soll (in dem oberen Beispiel die Farbe) und zum zweiten den Wert den die Eigenschaft übernehmen soll.

Diese Begriffe lassen sich in das folgende Schema zusammenfassen:

/* Eine Regel in CSS */

Selektor {
  Eigenschaft : Wert; /* Dies ist eine Deklaration */
}

Absolute Maßeinheiten

Viele Eigenschaften in CSS benötigen Maßangaben wie Schriften oder Boxen. Nun unterscheidet man in CSS zwischen absoluten und relativen Maßangaben.

Absolute Maßangaben sind

• px - Pixel
• cm - Zentimeter
• mm - Millimeter
• pc - Pica (12 Pixel)
• in - Inch
• pt - Punkt (1/72 inch)

Die Palette an Einheiten ist deshalb so breit, da CSS verschiedenste Medien wie Print (cm, mm, ... ) oder Bildschrim (Pixel) bedienen kann und diese jeweils besondere Maße benötigen. Das Problem bei absoluten Maßangaben ist vor allem in höheren Auflösungen zu sehen, was das folgende Beispiel zeigt:

p.kleineSchrift { font-size: 10px; }

Dort wird explizit eine Größe von 10 Pixel angegeben. Wo man diese noch bei einer geringen Auflösung von 640 Pixel mal 480 Pixel noch gut sichtbar wäre, ist diese bei einer Auflösung von 1600 Pixel mal 1200 Pixel gar nicht entzifferbar. Folglich stehen absolute Werte immer fix und nicht skalierbar, egal wie groß das Fenster ist.

Soll man nun auf absolute Werte gänzlich verzichten? Nein, es gibt immer noch Fälle in denen absolute Angaben mehr Sinn machen als relative, zum Beispiel:

• bei Abständen (margin, padding)
• bei Rändern (border)
• bei der Positionierung (position)

Ein großes Tabu sind nur absolute Angaben bei Schriftgrößen, da diese unter Umständen für eine schlechte Wahrnehmbarkeit sorgen könnten, wie oben beschrieben.

Relative Maßeinheiten

Relative Maße sind:

• Prozentangaben
• M-Höhe (em)
• X-Höhe (ex)

Relative Größen haben stets einen Bezugspunkt. Bei Prozentangaben wird auf Breite und Höhe wird auf das Elternelement bezogen, wie man an diesem Beispiel mit relativen Angaben sehen kann.

...
<p style="width:50%; background-color:red;"> </p>
...

Da das body - Element das Elternelement dieses Absatzes ist, beziehen sich die 50% auf die Fensterbreite, egal wie breit das Fenster ist auch wenn sich es verändert. Prozentangaben auf die Schriftgröße beziehen sich immer auf die aktuelle Schriftgröße. So sorgt das folgende Beispiel für eine dopplete Schriftgröße.

...
<p style="font-size:200%;">Dopplete Schriftgröße</p>
...

Die Einheiten em und ex beziehen sich immer auf die Schriftgröße des selektierten Elements. Die Einheit em ist die Höhe des Kleinbuchstabens "m" und ex, die des Kleinbuchstabens "x" der jeweiligen Schrift. Meistens werden diese Einheiten verwendet um die Schriftgrößen zu bestimmen, siehe das Beispiel mit M- und X-Höhen. Auch bei Rändern und Abständen wird auf die Schriftgröße bezogen

Diese relativen Maßeinheiten eignen sich wunderbar für die Schriftgrößen, weil sie sich an die jeweiligen Browserumgebungen anpassen können, wie zum Beispiel Handheldsysteme oder geringe Auflösungen.

Aber ein Probelm bei diesen relativen Werten ist ihre Ungenauigkeit und die Tatsache, dass jeder Browser diese relativen Werte anders berechnet, wie das folgende Beispiel zeigt. In diesem legen wir in einer ungeordneten Liste für jedes li-Element folgende Eigenschaft fest:

li { border:.1em solid green }

Der Wert ".1em solid green" soll eine grüne,relative dünne Linie ziehen, die eigentlich überall gleich aussehen sollte aber folgendes ist der Fall:

Wie man hier sehen kann, können unterschiedliche Browser relative Werte unterschiedlich interpretieren. Obwohl es in diesem Beispiel es nur unschön im Firefox - Browser aussieht, kann es in einem Layout wo es auf wenige Pixel ankommt arg stören. Wie dieses Beispiel mit Prozentangaben zeigt. Dort werden zwei Boxen mit einer Breite von 50 Prozent nebeneinander angelegt. Wenn nun aber die gesamte Breite des body - Elements in ihrer Pixelzahl ungerade ist und sie in diesem Fall durch zwei geteilt werden muss, lassen die Browser gerne mal einen Pixel aus. Sichtbar wird es an diesem Beispiel, wenn man die Fenstergröße verändert. In diesen Fällen sollte man lieber absolute Angaben verwenden.

Valider Code

Neben validen HTML - Code ist auch valider CSS - Code notwendig, damit auch alle Browser die Quelltexte richtig interpretieren und die Seite aufbauen können. Wenn der CSS - Code invalide sein sollte, kann es vorkommen, dass das Layout nicht bei allen Browsern richtig aufgebaut und sinnvoll angezeigt werden kann. Um CSS - Code auf Validität zu prüfen bietet das W3C neben dem HTML - auch einen CSS - Validator an. Wenn man diesen Validator die ersten Male benutzt, tauchen meistens die folgende Fehler auf.

Inkorrekter Id- oder Klassennamen

Bei CSS gibt es einige Regeln wie man Id- und Klassennamen benennen darf, da sie ansonsten nicht valide wären. Folgende Beispiele sind invalide.

Zahlen als erstes Zeichen des Id-/Klassennamens

/* So ist es nicht valide! */
#2ndColumn { ....}

Ziffern dürfen auch im Namen der Klasse oder ID vorhanden sein. Doch leider akzeptiert die aktuelle CSS - Spezikation keine Ziffern am Anfang des Namens, da es sonst mit Dimension ( zum Beispiel .5em) verwechselt werden könnte.

Verwenden des "Unterstriches" als Trennzeichen

/* So ist es nicht valide! */
#first_column { ....}

Möchte man Trenner in Namen einsetzen sollte man dafür eher das Minus-Zeichen ( ".eine-Klasse" ) verwenden. Da geübte Programmierer gerne den Unterstrich verwenden um Variablennamen besser lesbar zu machen ( "eine_variable = 1;") und laut der Spezifikation von CSS in Klassen- oder ID-Namen kein Unterstrich vorhanden sein darf, kann so oft invalider CSS - Code entstehen.

Sonderzeichen

Wie auch in sämtlichen Programmiersprachen, so dürfen auch die Bezeichner in CSS keine Sonderzeichen jeglicher Art haben, was auch Umlaute betrifft. Insgesamt dürfen also Klassen- und ID-Namen nur aus Groß- und Kleinbuchstaben, aus Ziffern wenn diese nicht an der ersten Stelle auftreten und aus Bindestrichen (nur Minuszeichen) bestehen.

Keine Vordergrundfarbe zur Hintergrundfarbe angegeben oder umgekehrt

Wenn man in einer Deklaration nur ein Farbwert für die Schrift und keinen entsprechenden Farbwert für den Hintergrund angibt, wie in diesem Beispiel:

.eineKlasse { color:red; }

so gibt der CSS - Validator eine Meldung zurück, dass keine entsprechende Hintergrundfarbe zu der angegebenen Schriftfarbe vorhanden ist. Im eigentlichen Sinne ist dies keine Fehlermeldung des CSS - Validators, sondern eine Warnung, d.h. der Quelltext ist weiterhin valide und für alle Browser verständlich.

Man kann daher nun diese Warnungen ignorieren, oder eine entsprechende und sinnvolle Hintergrund- oder Schriftfarbe zusätzlich mitangeben.

.eineKlasse {
  color:red;
  background-color:white;
}

Gerade in Hinsicht auf Barrierefreiheit sollten diese Warnungen ernstgenommen werden, denn die Systemeinstellungen der verschiedenen Browser für Farben könnten enorm variieren. Angenommen man gibt dem body - Element der color - Eigenschaft den Wert "green" (grüne Schriftfarbe) und irgendein Browser hat als Standardeinstellung einen grünen Hintergrund, wird die Schrift für den Benutzer unsichtbar.

Man kann daher für die jeweilige andere Farbeigenschaft einen neuen Farbwert festlegen, den Farbwert des Elternelements übernehmen oder "transparent" als Farbwert für den Hintergrund angeben, falls Hintergrundgrafiken mit farbigen Hintergründen nicht zusammenpassen sollten, siehe folgendes Beispiel:

div.navigation {
  color:blue;
  backgroundcolor:transparent;
}