Diese Seite ist Teil der Site Barrierefreies Internet von U. Kehl, URZ der Martin-Luther-Universität Halle-Wittenberg. Es sollen die Techniken zur Erstellung barrierefreier Web-Seiten bei der CSS-Codierung des WWW-Konsortiums kurz vorgestellt werden.


Inhaltsverzeichnis

Zum Anfang der Seite | Zum Anfang der Seite | Zum Abschnitt Formatvorlagen-Techniken

5. Formatvorlagen-Techniken

Zum Anfang der Seite | Zum Inhaltsverzeichnis | Zum Abschnit Wartung und Konsistenz

Auf dieser Seite werden die Techniken zur Herstellung von Formatvorlagen erläutert, die zur Entwicklung barrierefreier Web-Seiten genutzt werden sollen.

Der folgende Abschnitt diskutiert einige Techniken, um mit Hilfe von CSS barrierefreie Web-Seiten zu gestalten und gleichermaßen effektive Formatvorlagen zu erstellen.

Im HTML können Formatvorlagen extern über das LINK-Tag , im Kopf eines Dokumentes, über das STYLE-Tag und bei praktisch jedem HTML-Tag über das "style"-Attribut definiert werden.

Obwohl CSS ein kraftvolles Werkzeug ist die Möglichkeiten von HTML bzgl. der Gestaltung zu erhöhen, kann leider nicht damit gerechnet werden, daß jedes Konstrukt das gewünschte Aussehen hat. Voraussetzung dafür ist, daß sehr viele Nutzer einen Browser mit voller CSS2 - Unterstützung benutzen.


5.1. Verringerung der Wartung und Erhöhung der Konsistenz

Zum Anfang der Seite | Zum Abschnitt Formatvorlagen-Techniken | Zum Abschnitt nutzerdefinierte Vorlagen

Prüfpunkt in diesem Abschnitt: 14.3.


5.2. Nutzerdefinierte Vorlagen

Zum Anfang der Seite | Zum Abschnit Wartung und Konsistenz | Zum Abschnitt Maßeinheiten

Prüfpunkt in diesem Abschnitt: 11.2.

Damit Nutzer eigene Formatvorlagen definieren können, wurde im CSS2 die Bedeutung des "!important"-Operators aus CSS1 geändert. Im CSS1 hatten die Web-Designer die volle Kontrolle über das Aussehen ihrer Webseiten, im CSS2 überschreiben nutzerdefinierte Eigenschaften mit "!important" grundsätzlich die der Seite. Damit haben Nutzer die Möglichkeit, z. B. bestimmte Farbkombinationen und Schriftgrößen endgültig festzulegen.

Beispiel:

Diese Anweisung in einer Nutzer-Formatvorlage erzwingt, daß Absätze grundsätzlich mit 24-Punkte-Schrift dargestellt werden.

P { font-size: 24pt !important }

Ende Beispiel.

Der 'inherit'-Wert führt gemeinsam mit "!important" zu Formatregeln, die alle Eigenschaften in einem Dokument regieren.

Beispiel:

/* Die naechste Anweisung setzt die Schriftfarbe
auf weiss und die Hintergrundfarbe auf schwarz, 
unabhaengig, was in der Seite festgelegt ist. */
BODY {
  color: white !important ;
  background: black !important
}

/* Nun werden allen Farb- und Hintergrund-
attributen diese Werte "vererbt". */
* {
  color: inherit !important ;
  background: inherit !important
}

Ende Beispiel.

CSS2 bietet weiterhin diese Möglichkeiten der Nutzerkontrolle:

Zum Beispiel kann eine dicke schwarze Kontur um ein Element gezogen werden, wenn es den Eingabefokus hat und eine rote Kontur, wenn es aktiv ist.

Beispiel:

:focus  { outline: thick solid black; color: red; 
          font-size: 2em }
:active { outline: thick solid red; color: green; 
          font-size: 3em }

Und so sieht das Beispiel aus.

Ende Beispiel.


5.3. Maßeinheiten

Zum Anfang der Seite | Zum Abschnitt nutzerdefinierte Vorlagen | Zum Abschnitt generierte Inhalte

Prüfpunkt in diesem Abschnitt: 3.4.

Beispiel:

Nutzen Sie die Maßeinheit 'em' um Schriftgrößen festzulegen.

H1 { font-size: 2em }

Ende Beispiel.


Beispiel:

Nutzen sie relative Längen und Prozentwerte.

 BODY { margin-left: 15%; margin-right: 10%}

Ende Beispiel.


Beispiel:

Benutzen sie nur absolute Schriftgrößen, wenn die Gesamt-Ausgabegröße bekannt ist.

.businesscard { font-size: 8pt }

Ende Beispiel.


5.4. Generierter Inhalt

Zum Anfang der Seite | Zum Abschnitt Maßeinheiten | Zum Abschnitt Schriften

Kontrollpunkte für diesen Abschnitt: 3.1. und 6.1.

CSS2 beinhaltet eine Reihe von Möglichkeiten, Inhalte automatisch zu generieren. Allerdings wird dieser Inhalt durch Ausschalten von Formatvorlagen unterdrückt und nicht angezeigt. Dazu gehören:


5.5. Schriften

Zum Anfang der Seite | Zum Abschnitt generierte Inhalte | Zum Abschnitt Textgestaltung

Prüfpunkt in diesem Abschnitt: 11.2.

Techniken:

Beispiel:

Legen Sie immer ein generischen Standardfont fest.

 BODY { font-family: "Gill Sans", sans-serif }

Ende Beispiel.


Beispiel:

<STYLE type="text/css">
  P.important { font-weight: bold }
  P.less-important { font-weight: lighter; font-size: smaller }
  H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>

Ende Beispiel.


5.6. Textgestaltung

Zum Anfang der Seite | Zum Abschnitt Schriften | Zum Abschnitt Text statt Bilder

Prüfpunkt in diesem Abschnitt: 7.2.

Folgende CSS-Eigenschaften können zur Textgestaltung benutzt werden:


5.7. Text statt Bilder

Zum Anfang der Seite | Zum Abschnitt Textgestaltung | Zum Abschnitt Textformatierung

Prüfpunkt in diesem Abschnitt: 3.3.

Web-Designer sollten Formatvorlagen für die Gestaltung von Text benutzen, statt den Text in Bilder zu präsentieren. Die Nutzung von Text ermöglicht einer größeren Anzahl von Nutzern den Zugriff. Formatvorlagen erlauben es auch, daß Nutzer bestimmte Anzeigeeigenschaften, wie Größe und Farbe, mit eigenen Formatvorlagen neu definieren können.

Wenn es sich nicht vermeiden läßt, wie z. B. für spezielle Fonts (Lautschriften, Braille), Grafiken zu nutzen, dann müssen aber die Richtlinie für Textäquivalente und alternative Seiten eingehalten werden.


5.8. Textformatierung und -positionierung

Zum Anfang der Seite | Zum Abschnitt Text statt Bilder | Zum Abschnitt Farben

Prüfpunkt in diesem Abschnitt: 3.3.

Die folgenden CSS2 Eigenschaften können genutzt werden, um Text zu formatieren und zu positionieren:

Beispiel:

Beispiel für große Anfangsbuchstaben.

<HEAD>
  <TITLE>Große Anfangsbuchstaben</TITLE>
  <STYLE type="text/css">
    .dropcap { font-size : 120%; font-family : Helvetica } 
  </STYLE>
</HEAD>
<BODY>
  <P><SPAN class="dropcap">E</SPAN>s war einmal ...
</BODY>

Ende Beispiel.


5.9. Farben

Zum Anfang der Seite | Zum Abschnitt Textformatierung | Zum Abschnitt Listen

5.9.1. Farbkontrast

Prüfpunkt in diesem Abschnitt: 2.2.

Geben sie grundsätzlich für Farben die numerischen Werte in RGB-Darstellung und keine Namen an. Farbnamen können fehlinterpretiert werden oder unbekannt sein.

Beispiel:

Benutzen Sie die numerische Angabe von Farben in RGB, statt den Farbnamen.

H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}

Ende Beispiel.


Schlechtes Beispiel:

H1 { color: red}

Ende schlechtes Beispiel.

Nutzen Sie folgende CSS-Eigenschaften, um Farben festzulegen:

Beispiel:

BODY { color: #000000; background-color: #FFFFCC; }
a:link { color: #000066; background-color: #FFFFCC}
a:active { color: #FF0000; background-color: #FFFFCC}
a:visited { color: #660066; background-color: #FFFFCC}
   

Ende Beispiel.

Achten Sie darauf, daß der Kontrast zwischen Vordergrund und Hintergrundfarbe gut ist (erfahrungsgemäß mindestens 50% in der Farbskala). Wenn eine Vordergrundfarbe festgelegt wurde, so muß auch die Hintergrundfarbe (und umgekehrt) angegeben werden.

5.9.2. Information nicht nur durch Farbe

Prüfpunkt in diesem Abschnitt: 2.1.

Stellen sie sicher, daß Informationen nicht alleine durch Farbe hervorgehoben werden. Nutzen Sie zusätzlich z. B. Schriften und Kontext.

Zum Beispiel sind in diesem Dokument Beispiele durch folgende Effekte hervorgehoben:

Schnelltest: Um zu prüfen, ob Ihre Seite auch ohne Farben lesbar sind, testen Sie sie an einem Monochrom-Bildschirm oder schalten Sie die Farbe im Browser aus. Stellen Sie im Browser, wenn möglich nur die Farben schwarz, weiß und vier Graustufen ein und betrachten Ihre Seite damit.

Schnelltest: Um hinreichenden Farbkontrast zu testen, drucken Sie Ihre Seite auf einen Schwarz/Weiß-Drucker mit Text und Hintergrundfarbe aus und erstellen Sie zwei bis drei Kopien dieser Seite (Kopie von Kopie). Spätestens jetzt sehen Sie, wo zusätzliche Informationen angebracht werden müssen (z. B. Unterstreichenden bei Links, größere Buchstaben).


5.10. Verwendung von inhaltlichen Anhaltspunkten in Listen

Zum Anfang der Seite | Zum Abschnitt Farben | Zum Abschnitt Layout

Prüfpunkte in diesem Abschnitt: 3.6. und 13.2.

Web-Designer sollten das UL-Element für ungeordnete und OL für geordnete Listen im Zusammenspiel mit Formatvorlagen zur Gestaltung inhaltsbezogener Anhaltspunkte benutzen

Ein Beispiel ist das derzeit nicht funktionierende Beispiel zur Generierung mehrfacher Numerierungen im Abschnitt HTML-Techniken.

Das folgende Beispiel zeigt, wie bei geschachtelten Listen die Endekennungen der Unterlisten ausgeblendet und durch andere Gestaltungsvarianten ersetzt werden kann. Sind keine Formatvorlagen möglich, erscheint eine verbale Endemarkierung.

Beispiel:

<STYLE type="text/css">
  .endoflist { display: none }
  .sublist { list-style-type: lower-alpha }
</STYLE>
<UL>
  <LI>Papier:
  <UL class="sublist">
    <LI>Umschläge
    <LI>Notenpapier
    <LI>Briefkopf
    <LI>Rollenpapier
    <span class="endoflist">(Ende von Papier</span>
  </UL>
  <LI>Stifte:
  <UL class="sublist">
    <LI>Kugelschreiber
    <LI>Weißwandtafel-Stifte
    <span class="endoflist">(Ende von Stifte)</span>
  </UL>
  ...
</UL>

Ende Beispiel.


5.11. Layout, Positionierung, Ebenen und Ausrichtung

Zum Anfang der Seite | Zum Abschnitt Listen | Zum Abschnitt Linien und Ränder

Prüfpunkte in diesem Abschnitt: 3.3. und 5.3.

Layout, Positionierung, Ebenen und Ausrichtung sollten mit Formatvorlagen realisiert werden,

Gerade bei der Positionierung des es wichtig, daß Web-Designer immer Seiten gestalten sollten, die auch ohne Formatvorlagen einen Sinn ergeben. Die wahllose Nutzung der oben aufgeführten Eigenschaften kann dazu führen, daß die Reihenfolge der Informationen in der Web-Seite - und somit auch bei nichtgenutzen Formatvorlagen - und z. B. auf dem Bildschirm völllig verschieden sind, siehe auch Abschnitt Positionierung mit Formatvorlagen und Auszeichnung für gute Transformation. Die Positionierungseigenschaften sollten deshalb nur benutzt werden, um Randbemerkungen, Seitenstreifen, frameartige Effekte, einfache Kopf und Fußzeilen u. ä. zu erstellen.

5.11.1. Bilder als Platzhalter

Stellen Sie Textäquivalente für alle Bilder, einschließlich unsichtbarer oder transparenter Bilder her, nutzen Sie dazu das "alt"attribut


5.12. Linien und Ränder

Zum Anfang der Seite | Zum Abschnitt Layout | Zum Abschnitt Positionierung

Prüfpunkt in diesem Abschnitt: 6.1.

Linien und Ränder haben visuell den Effekt zu trennen.

Nutzen sie diese CSS-Eigenschaften, um Rahmen zu gestalten:

Web-Designer sollten Formatvorlagen nutzen, um Linien und Rahmen zu erstellen.

Beispiel:

In diesem Beispiel wird die Überschrift H1 zusätzlich mit einer zwei Pixel dicken Linie über dem Text gekennzeichnet.

<HEAD>
  <TITLE>Rote Linie durch Formatvorlage</TITLE>
  <STYLE type="text/css">
    H1 { padding-top: 1em; border-top: 2px red }
  </STYLE>
</HEAD>
<BODY>
  <H1>Kap itel 8 - Sprachausgaben</H1>
</BODY>

Ende Beispiel

Falls einen Linie als Strukturelement genutzt wird, stellen Sie sicher, daß diese Struktur auch ohne visuelle Darstellung erkennbar ist.

Beispiel:

Hier wird das DIV-Tag genutzt, um zusätzlich zu einer Horizontallinie eine Navigationszeile zu kennzeichnen.

<DIV class="navigation-bar">
  <HR>
  <A rel="Next" href="next.html">[Nächste Seite]</A>
  <A rel="Previous" href="previous.html">
         [Vorhergehende Seite]</A>
  <A rel="First" href="first.html">[Erste Seite]</A>
</DIV>

Ende Beispiel


5.13. Positionierung mit Formatvorlagen und Auszeichnung für gute Transformation

Zum Anfang der Seite | Zum Abschnitt Linien und Ränder | Zum Abschnitt Bewegung

Prüfpunkt in diesem Abschnitt: 6.1.

Durch die Positionierungsmöglichkeiten von CSS muß die Anzeigereihenfolge am Bildschirm nicht notwendig die sein, die im Quelltext eingehalten wurde. Damit können sich vermischte Inhalte bei ausgeschalteten Formatvorlagen ergeben oder die automatische Umwandlung sinnentstellend sein.

Schlechtes Beispiel:

<head>
<style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; 
           background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; 
           background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; 
           margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; 
           margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; 
           margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; 
           margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; 
           margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
</style>
</head>

<-- folgendes HTML wird ohne CSS zum 
    lückenlosen Fließtext //-->
<body>
  <div class="box">
    <span class="menu1">Produkte</span>
    <span class="menu2">Orte</span> 
    <span class="item1">Telefone</span> 
    <span class="item2">Computer</span>
    <span class="item3">MP3-Spieler</span>
    <span class="item5">Halle</span> 
    <span class="item4">Leipzig</span>
  </div>
</body>

So sieht das schlechte Beispiel mit CSS aus (natürlich nur, wenn Sie es benutzen)

So sieht das schlechte Beispiel ohne CSS aus !

Ende schlechtes Beispiel

Das schlechte Beispiel mit identischen Formatvorlagen, aber mit einem Layout im HTML (Definitionsliste). Damit sieht die Variante ohne CSS zwar nicht umwerfend gut aus, aber der Inhalt ist lesbar und verständlich.

Beispiel:

<head>
<style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; 
           background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; 
           background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; 
           margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; 
           margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; 
           margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; 
           margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; 
           margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
</style>
</head>

<-- folgendes HTML enthält auch Positionierungen, 
    in diesem Fall eine Definitionsliste. //-->
<body>
  <div class="box">
    <dl>
      <dt class="menu1">Produkte</dt>
        <dd class="item1">Telefone</dd>
        <dd class="item2">Computer</dd>
        <dd class="item3">MP3-Spieler</dd>
      <dt class="menu2">Orte</dt>
        <dd class="item4">Leipzig</dd>
        <dd class="item5">Halle</dd>
    </dl>
  </div>
</body>

So sieht das Beispiel mit CSS aus (natürlich nur, wenn Sie es benutzen)

So sieht das Beispiel ohne CSS aus !

Ende Beispiel


5.14. Erzeugung von Bewegung mit Formatvorlagen und Skripten

Zum Anfang der Seite | Zum Abschnitt Positionierung | Zum Abschnitt hörbare Vorlagen

Prüfpunkt in diesem Abschnitt: 7.3.

Solange Browser es noch nicht erlauben, ungesteuerte Bewegungen abzuschalten oder anzuhalten, sollten auch folgende, durch CSS-Techniken realisierbare, Effekte vermieden werden:


5.15. Hörbare Formatvorlagen

Zum Anfang der Seite | Zum Abschnitt Bewegung | Zum Abschnitt alternative Seiten

Prüfpunkt in diesem Abschnitt: 11.3.

Die Verwendung von CSS-Eigenschaften zur Steuerung der Ausgabe von Sounddateien ermöglicht es nichtsehenden Nutzern oder Nutzern von Sprachausgabe die Informationen fast genau so zu erhalten, wie über Schriften.

Das folgende Beispiel zeigt, wie unterschiedliche Klangqualitäten (einschließlich der 'voice-family', so etwas wie ein Audio-Font) genutzt werden können, um den Hörer erkenntlich zu machen, daß eine Überschrift gesprochen wird.

Beispiel:

H1 {
  voice-family: paul;
  stress: 20;
  richness: 90;
  cue-before: url("ping.au")
}

Ende Beispiel

Die folgenden Eigenschaften sind Teil der CSS2 Audio-Formatvorlagen.

Darüber hinaus steuert die 'speak-header'-Eigenschaft, wie Tabellenüberschriften vor einer Tabellenzelle gesprochen werden sollen.


5.16. Zugriff auf alternative Präsentation des Inhalts

Zum Anfang der Seite | Zum Abschnitt hörbare Vorlagen | Zum Abschnitt Medientypen

Prüfpunkt in diesem Abschnitt: 11.3.

CSS2 erlaubt es Nutzern auf alternative Präsentationen des Inhalt zuzugreifen, wenn folgende Attribute gemeinsam benutzt werden:

Beispiel:

Durch dieses Konstrukt wird der Inhalt des alt-Attributes eines Bildes nach diesem angezeigt.

IMG:after {
  content: attr(alt)
}

Ende Beispiel

Man beachte, daß damit der Inhalt des alt-Attributes auch dann angezeigt wird, wenn das Bild nicht dargestellt wird, weil z. B. das Laden von Bildern abgeschaltet ist.


5.17. Medientypen

Zum Anfang der Seite | Zum Abschnitt alternative Seiten | Zum Ende der Seite

Prüfpunkt in diesem Abschnitt: 11.3.

Die CSS2 'media types' Regel (@media) erlaubt es Web-Designern, Formatvorlagen für verschiedenen Ausgabegeräte herzustellen, um eine angepaßte Anzeige der Dokumente zu erreichen. Die Formatvorlagen können z. B. für die optimale Ausgabe auf Braille-Zeilen, Sprachsynthese, Terminals oder Druckern genutzt werden. Die konsequente Nutzung der @media-Regel kann auch die Ladezeit verkürzen, indem unangebrachte Regeln vom Browser ignoriert werden können.


Nun folgt noch das Glossar.

Letzte Änderung: 18.10.2002