suchmaschinenfreundliches Webdesign mit CSS:

Internet-Auftritte barrierefrei und suchmaschinen-freundlich gestalten:

Wer seinen Internet-Auftritt barrierefrei und besonders suchmaschinen-freundlich gestalten will, sollte sein Augenmerk auf Webdesign mit CSS richten. Denn mit CSS-Angaben lassen sich nicht nur einzelne HTML-Elemente formatieren, vielmehr kann das gesamte Layout einer Website mit CSS-Attributen festgelegt werden.

Zwei der wichtigsten Voraussetzungen für Barrierefreiheit sind tabellen- und framefreie Gestaltung sowie skalierbare Schrift (Einstellung der Schriftgröße über das "Ansicht"-Menü des Browsers). Suchmaschinen-freundliches und barrierefreies Webdesign sind keine Widersprüche, sondern gehen Hand in Hand: Seiten, die für "Screen Reader" (Programme, die Sehbehinderten den Text einer Website vorlesen) gut lesbar sind, sind auch für Suchmaschinen-robots leicht verständlich.

Der wesentliche Vorteil einer frameset-Seite (daß die Navigation stets sichtbar ist, auch wenn im Inhalts-Fenster nach unten gescrollt wird) läßt sich auch mit einem CSS-Layout erreichen, indem die Navigation fixiert positioniert wird und damit trotz Scrollens immer im Blickfeld bleibt.

Besonders suchmaschinen-freundlich wird eine Seite einmal dadurch, daß es durch absolute oder fixierte Positionierung der Navigation möglich wird, den hierfür erforderlichen Quellcode am Ende des body-Bereichs zu gruppieren, so daß Kopfzeile und Inhalts-Bereich mit den wichtigen Suchbegriffen im Quellcode ganz vorne stehen. Zum Zweiten werden durch die Formatierung über CSS-Selektoren (Elemente, Klassen und IDs) Inhalte und Attribute einer Seite räumlich getrennt und dadurch die Seite von unnötigem Formatierungs-Ballast befreit.

Die zentrale Hinterlegung der Formatierungs-Angaben einer Website in einer CSS-Vorlagen-Datei bietet darüber hinaus zwei weitere Vorteile: Die Ladezeiten sind kürzer, weil die Formatierungs-Angaben nicht mit jeder weiteren Unterseite eines Projektes erneut geladen werden müssen, sondern über die CSS-Vorlagen-Datei nur ein einziges Mal geladen werden. Außerdem können Änderungen des Layout projektweit über diese eine CSS-Vorlagen-Datei durchgeführt werden.

Ausführliche Informationen und Beispiele zum Thema Webdesign mit CSS finden Sie hier:

• SelfHtml - CSS-basierte Layouts, deutschsprachig
  
  
• CSS4You - Layouten ohne Tabellen, deutschsprachig
  
  
• PIE - CSS Tipps und Tricks - Browser Fehler, englischsprachig

Und beim Barrierefinder können Sie kostenlos testen, ob Ihr Netzauftritt barrierefrei ist.

Zuweisung von CSS-Formatangaben sind möglich über ...

Nr.	Art der Zuweisung	Beispiel
1	Inline-Eintrag (= explizite Zuweisung)	<div style="margin-top:2.4em; border-width:2px; border-style:dotted; border-color:navy;">...</div> Diese explizite Zuweisung setzt für dieses Vorkommen des Elements (im Kopf der HTML-Datei oder in einer CSS-Vorlagen-Datei) hinterlegte CSS-Formatangaben hinsichtlich margin-top, border-width, border-style und border-color außer Kraft.
2 *	implizite Zuweisung, das Element selbst ist der Selektor	<h1>...</h1>
3 *	über eine Klasse (Selektor), Selektoren: nächste Tabelle	<h1 class="xyz">...</h1>
4 *	über eine ID (Selektor), Selektoren: nächste Tabelle	<div id="absolut">...</div>
* Für die Möglichkeiten 2, 3 und 4 gilt: Die CSS-Angaben müssen im Kopf der jeweiligen HTML-Datei oder in einer CSS-Vorlagen-Datei hinterlegt sein.
Wenn für ein Element CSS-Formatangaben mehrfach zugewiesen sein, so gelten folgende Regeln: a) Eine explizite Zuweisung setzt für dieses Element CSS-Formatangaben außer Kraft, die im Kopf der HTML-Datei oder in einer CSS-Vorlagen-Datei hinterlegt sind. b) Eine Zuweisung von CSS-Formatangaben im Kopf der HTML-Datei setzt für diese Datei CSS-Angaben außer Kraft, die in einer CSS-Vorlagen-Datei hinterlegt sind.

Formatierung über CSS-Selektoren (Elemente, Klassen und IDs): Übersicht:

Bsp.	Selektor	CSS-Angaben {...} gelten für ...
1	h1 {...}	Elemente <h1>...</h1> ohne zugewiesene Klasse oder ID (implizite CSS-Zuweisung)
2	.xyz {...}	Elemente der class="xyz"
3	#nav a.xyz {...}	Element <a class="xyz" ...>...</a> in Element der id="nav"
4	#nav a:link.xyz {...}	Element <a class="xyz" ...>...</a> der Pseudoklasse "link" in Element der id="nav"
5	li a {...}	Element <a ...>...</a> in Element <li>...</li>
6	#nav li a {...}	Element <a ...>...</a> in Element <li>...</li> in Element der id="nav"
7	h1.xyz {...}	Element <h1 class="xyz">...</h1>
8	.aa .bb .cc {...}	Elemente der class="cc" innerhalb der class="bb" innerhalb der class="aa" (verschachtelte Klassen: aa höchste, cc niedrigste Klasse)
9	.xyz h3 a {...}	Element <a ...>...</a> in Element <h3>...</h3> in Element der class="xyz"
10	.xyz h3 a:visited {...}	Element <a ...>...</a> der Pseudoklasse "visited" in Element <h3>...</h3> in Element der class="xyz"
11	ul#nav a {...}	Element <a ...>...</a> in Element <ul>...</ul> der id="nav" Der vorangestellte Elementtyp wird von älteren Versionen als Internet Explorer 5 und Netscape 6 nicht erkannt.
12	a[href ^="http://"], a[href ^="https://"] {...}	Elemente <a ...>...</a>, aber nur dann, wenn sie am Anfang ihres href-Attributs die Zeichenketten http:// oder https:// enthalten (attribut-bedingte CSS-Zuweisung)
	a[href $=".pdf"] {...}	Elemente <a ...>...</a>, aber nur dann, wenn sie am Ende ihres href-Attributs die Zeichenkette .pdf enthalten (attribut-bedingte CSS-Zuweisung)
	Über solche attribut-bedingte CSS-Zuweisungen können zum Beispiel Hintergrundbilder automatisch eingesteuert werden. Die IE-Versionen 6 und älter erkennen bedingte CSS-Zuweisungen nicht.
Auf jeder Seite darf nur ein Element mit der gleichen ID gekennzeichnet sein. Bei mehreren Elementen mit gleichen Eigenschaften kann die Zuweisung über Klassen erfolgen.
Einem Element können auch mehrere Klassen zugewiesen werden; Trennzeichen zwischen den Klassen ist das Leerzeichen (ohne Komma). Beispiel: <p class="einruecken ausrichten">...</p>
Weitere Möglichkeiten ergeben sich durch Kombination der hier dargestellten Beispiele.
Kommentare in CSS-Bereichen werden wie in PL/1 gekennzeichnet: /* Dies ist ein Kommentar */

CSS Muster-Vorlage für ein barrierefreies Formular mit skalierbarer Schrift, ohne Tabelle:

Beispiele für ein Formular ohne Tabellen-Layout gibt es im Netz kaum. Deshalb zeigen wir hier eine CSS Muster-Vorlage für ein barrierefreies Formular mit skalierbarer Schrift, ohne Tabelle.

Javascript-Prüfungen für die Eingabefelder sind mit dabei und der Einfachheit halber im head vermerkt. Diese Prüfungen sollten Sie ebenso wie die im head notierten CSS-Attribute jeweils in eine externe Datei auslagern. Welche Aktion das Formular ausführen soll, müßten Sie natürlich noch nachtragen. Links ist Platz für Ihre Navigation freigehalten.

Die Formular-Vorlage können Sie hier runterladen Vorlage-Formular.zip (2 KB) und kostenlos für Ihr eigenes Formular verwenden. Eine anderweitige Nutzung der Formular-Vorlage ist nicht zulässig.

Warum ist diese Website nicht nach oben erwähnten Grundsätzen (Webdesign mit CSS) gestaltet?

Da geht es uns so wie dem Schuster, der seine Kunden bestens bedient, aber selbst mit geflickten Schuhen rumläuft. Andere Projekte haben Vorrang, aber sobald wir Zeit haben, wird unsere Website, deren Änfänge bis ins Jahr 2000 zurückreichen, umgestaltet.

Zur Startseite: Webdesign Erlangen - EDV-Beratung Thomas