Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Barrierefreies Webdesign

Bei der Gestaltung von Webseiten sollte möglichst auf Einschränkungen rücksicht genommen werden, welche Menschen in unserer Gesellschaft haben können. Dies können Einschränkungen bei der Benutzung einer Maus oder auch stark eingeschränkte Sehfähigkeit oder gar eine Erblindung sein.

Schriftgrössen

Auf einer Webseite sollte es immer auch möglich sein die Schriftgrössen anzupassen. Für Sehbehinderte Menschen ist dies eine sehr gute Hilfe.

Accesskey / Shortcuts

Es können beispielsweise Shortcuts für die Navigation der Webseite zur Vefügung gestellt werden. Der Vorteil dabei ist, dass die Webseite dann ohne die Hilfe der Maus navigiert werden kann. Dies ist vor allem auch für Sehbehinderte Menschen sehr wichtig. Diese Webseite haben wir mit Shurtcuts eingerichtet. Mittels Drücken der Tastenkombination der Taste [ALT] + [Buchstabe] kann zwischen den einzelnen Themen gewechselt werden. Drücken Sie Beispielsweise [ALT] + [p] wird das Thema PHP angezeigt, die Kombination [ALT] + [m] führt Sie auf den Bereich MySQL, usw.

Ein Accesskey kann mit dem Attribut accesskey="" bei Links definiert werden. Also zum Beispiel:

<a accesskey="g" target="_blank" href="http://www.google.ch">www.google.ch</a> www.google.ch

Tabulatorreihenfolge

Ebenfalls sehr wichtig bei einer Seite, welche ohne Maus gesteuert werden können soll, ist die Tabulatorreihenfolge. Folgende Elemente können auf einer Webseite normalerweise durch Drücken des Tabulators ausgewählt werden: A, AREA, BUTTON, INPUT, OBJECT, SELECT und TEXTAREA. Nomalerweise springt der Tabulator von Element zu Element. Die Elemente werden dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Es können aber beliebige Reihenfolge für diese Elemente festgelegt werden.

Die Reihenfolge kann mit dem Attribut tabbindex="[Zahl]" festgelegt werden. Also zum Beispiel:

<a tabindex="1" target="_blank" href="http://www.google.ch">www.google.ch</a><br /> <a tabindex="3" target="_blank" href="http://www.google.ch">www.google.ch</a><br /> <a tabindex="2" target="_blank" href="http://www.google.ch">www.google.ch</a><br /> www.google.ch
www.google.ch
www.google.ch

Bei dieser Webseite wurde die Tabulatorreihenfolge nicht festgelegt. Es wurden aber für die Links in der Titelleiste (Startseite, JavaScript, etc.) und für den Styleswitcher (Formular rechts oben) den tabindex="-1" zugeordnet. So werden diese nicht durch den Tabulator angesteuert und ein erster Tabulatorklick steuert direkt die Linke Navigationsleiste an.

Tabellen/Frameloses Layout

Vor einigen Jahren wurden Webseiten mit Hilfe von Tabellen strukturiert. Sobald mit Tabellen gearbeitet wird, werden häufig auch Tabellen ineinander verschachtelt. Für Screenreader sind solche Webseiten sehr schwierig zu interpretieren. Ebenfalls können diese Webseiten nur mit grosser Schwierigkeit ohne Maus bedient werden.

Auch Frames generieren unnötige Hürden.

Webseiten sollten also nicht mit Tabllen sondern mittels dem div-Tag strukturiert werden. Das Tag erzeugt einen Layer (Ebene), welche frei auf der Seite positioniert werden kann.

Grafiken beschriften

Grafiken können von stark sehbehindereten Menschen nicht wahrgenommen werden. Alle Grafiken einer Webseite sollten mit einem alt-Tag versehen werden. Screenreader geben diesen Text den Sehbehinderten weiter und sie können sich so ein Bild der Webseite machen.

Auf Imagemaps als Navigation einer Webseite sollte verzichtet werden