Barrierefreies Webdesign

Nutze Tabellen nicht für Layoutzwecke!

Eine Tabelle zwingt den Browser dazu, die Inhalte nebeneinander zu setzen. Dadurch entstehen schnell horizontale Scrollbalken. Bei CSS-Layouts dagegen, wird der Inhalt, sofern die Viewportgröße zu klein wird, i.d.R. unter der Navi platziert. Das ist besonders sinnvoll, wenn der Nutzer einen kleinen Bildschirm hat. Kein Nutzer scrollt gern quer!

Frames haben viele Nachteile!

Frames sollten nicht mehr verwendet werden, weil es viele Probleme durch deren Nutzung gibt:

1. Mehrere Scrollbalken sind bei Anwendern nicht gerade beliebt.
2. Eine Seite, innerhalb eines Framesets kann nicht direkt durch einen Link oder ein Lesezeichen erreicht werden.
3. Die Ladezeiten sind v.a beim 1. Aufruf der Startseite deutlich höher, da mehrere Seiten geladen werden müssen, die jew. erst vom Server angefordert werden müssen.
4. Eine Webseite, die den Bildschirminhalt auch noch in mehrere Teile aufteilt, ist auf kleinen Bildschirmen sehr schwer zu betrachten.
5. Browser, die Frames nicht unterstützen können gar nichts, oder nur einen Alternativtext anzeigen

Teste deine Seiten nicht zuerst mit dem Internet Explorer

Der IE ist sehr fehlertolerant und errät gern, was der Autor meinte. Solche Seiten sind aber nicht gerade zukunftssicher und können von anderen Browsern nicht richtig angezeigt werden. Ein besonders standardkonformer Browser ist z.B. Mozilla Firefox. Seiten, die dort laufen, sind i.d.R. korrekt ausgezeichnet und werden auch von anderen Browser korrekt dargestellt. Da der IE aber leider eine ganze Menge Fehler beim Rendern von Seiten hat, sollte man eine Seite auch ab und zu mal mit dem IE anschauen.
Meiner Meinung nach, kann man zwischen 2 Browsergruppen unterscheiden:
die standardkonformen Browser, die Fehler weniger ignorieren aber mehr Standards beherrschen. Das sind so ziemlich alle Browser, die nicht auf dem IE basieren. Dazu gehören: Konquerer, Firefox, Opera, Safari und die neueren Netscapes.
Die zweite Gruppe bildet der IE und alle anderen Browser, die seine Rendering Engine nutzen. Diese können wenig und sind sehr fehlertolerant.

Schreibe nicht für bestimmte Bildschirmauflösungen

Da du nicht weißt, welche Bildschirmauflösung der Anwender eingestellt hat, und noch weniger, wie groß der Viewport seines Browsers ist, solltest du lieber von Anfang an auf pixelgenaue Layouts verzichten. Versuche das Layout lieber so zu erstellen, dass von Anfang an keine horizontalen Scrollbalken auftauchen. Genauso wichtig ist natürlich auch, dass es bei einem zu kleinem Fenster nicht unbenutzbar wird. Probiere also aus, was möglich ist und setze an der entscheidenden Stelle eine Mindestbreite (min-width). Das wird vom IE bislang zwar noch nicht unterstützt, aber das sollte dich nicht stören. Alle modernen Browser unterstützen diese Technik ja bereits.
Eine min-width sollte passend zum Layout gesetzt werden. Falls dort also hauptsächlich die Maßeinheit em genutzt wurde, sollte die min-width auch in em festgelegt werden, der Anwender wird den vertikalen Scrollbalken dann los, indem er den Text, und somit das ganze Layout verkleinert. Du solltest den Anwender aber nicht grundlos zur Verkleinerung der Schrift zwingen.

Nutze keine WYSIWYG-Programme

Wenn du sauberen Code und eine flexible Seite erstellen willst, solltest du auf so genannte WYSIWYG-Programme verzichten. Das sind Programme, bei denen man direkt am Layout und nicht am Quelltext arbeitet. Beispiele sind z.B. Frontpage, Dreamweaver oder NVU. Noch schlimmer sind aber Textbearbeitungsprogramme wie MS Word. Anfangs mag es dir vielleicht als einfacher erscheinen, mit solchen Programmen zu arbeiten, aber ordentliche, semantische und flexible Seiten kann man nur mit einem Texteditor erzeugen.

Setze HTML-Elemente sinnvoll ein

Leider gibt es manche die denken, dass man, um Text einzurücken unbedingt ein Blockquote braucht. Dabei ist eine Blockquote für Zitate gedacht. Genauso wird auch mit h*-Elementen oft Unfug getrieben. Diese sind nicht dazu da, Text groß und fett zu machen, sondern für Überschriften. Die Hauptüberschrift sollte z.b. immer h1 sein. Falls sie dir zu groß ist, formatiere sie mit CSS.

Für's Layout gibt es CSS

Willst du Text farbig machen? Oder größer? Verwende dazu bitte nicht <font> oder <big>! Um einen ganzen Textblock umzufärben, gebe ihm evtl. eine ID und formatiere ihn in der zentralen CSS-Datei. Um einzelne Wörter hervorzuheben, verwende die HTML-Elemente <em> und <strong> und formatiere diese über deine CSS-Datei.

Größenangaben richtig einsetzen

Mit CSS gibt es sehr viele verschiedene Einheiten für Größenangaben. Das sind Einheiten wie: Punkt (pt), Pica (pc), inch (in), Millimeter (mm), Zentimeter (cm), Pixel (px), em (bezogen auf die Größe des Elternelements, oder der Einstellung im Browser), ex (bezieht sich auf die Normalgröße des Kleinbuchstaben x) und % (wirkt bei Text ähnlich wie em, bei Blöcken dagegen relativ zur Größe des Browserfensters).
Die Einheiten pt, pc, in, mm und cm sind für Drucklayouts gedacht und sollten nicht für die Bildschirmausgabe verwendet werden.
Die Einheit px ist für die Größe von Grafiken zuständig, sofern diese nicht skalierbar, und somit etwas pixelig werden würde. Teilweise kann aber auch hier em verwendet werden.
em, ex und % sind die Angaben, die für die Bildschirmausgabe am besten geeignet sind. Bei Verwendung dieser Angaben bleibt das Layout flexibel und kann vom Anwender problemlos vergrößert oder verkleinert werden. Da nicht jeder die gleiche Bildschirmauflösung nutzt, sollte man diese Angaben für die Bildschirmausgabe nutzen.