Dabei ist i.d.R. kein böser Wille im Spiel sondern Unwissenheit.

Vielleicht kann ich euch da mit ein paar simplen Tips hilfreich zur Seite stehen:

Schriftgröße in em oder Prozent

In diesem Artikel habe ich das schon einmal beschrieben.

Skiplinks

Damit wird dem Besucher die Möglichkeit gegeben Bereiche der Website zu überspringen, um direkt zur Navigation oder zum Inhalt zu springen.

Oben auf der Seite werden die Skiplinks idealerweise unter der h1-Überschrift plaziert. Man sollte sich da auf maximal drei beschränken, um keine Verwirrung zu stiften. Am Ende der Seite (im Fussbereich) gibt es die Skiplinks noch einmal, diesmal um zu den jeweiligen Bereichen zurückzuspringen.

Beispiel:

Wenn die Navigation direkt nach der Hauptüberschrift kommt reicht ein Skiplink zum Inhalt imho aus. Die Bereiche die angesprungen werden sollen brauchen id’s, um sie anspringbar zu machen.

Die Skiplinks können für normale Besucher per CSS ausgeblendet werden:

Solche Codeschnipsel könnt ihr in einer Vorlagendatei speichern, damit sie bei Bedarf per copy/paste rasch eingefügt und angepaßt werden können.

Nach oben

Skiplinktabs für Durchtabber

Menschen mit motorischen Einschränkungen haben oft Probleme mit der Mausbedienung, deshalb hangeln sie sich oft mit der Tab-Taste durch eine Seite. Diese Tabs kann man ganz einfach sichtbar machen.

Um auch die Skiplinks dabei ans Licht zu holen ergänzen wir den Quelltext derselben um eine Klasse und fügen noch etwas CSS dazu:

Quellcode:

CSS dazu:

Die vorher aus dem Bild geschobenen Skiplinks werden beim Betätigen der Tab-Taste eingeblendet. Das funktioniert zumindest im Firefox und im Internet Explorer.

Nach oben

Text,- und Hintergrundkontrast mit CCA prüfen

ca. 8-10% der männlichen Bevölkerung leidet mehr oder weniger unter einer Farbfehlsichtigkeit. Viele Ältere sehen nicht mehr so gut und haben beim Lesen Probleme, wenn der Kontrast zwischen der Schriftfarbe und der Hintergrundfarbe zu gering ist.

Mit dem Colour Contrast Analyzer könnt ihr schnell checken, ob da alles in Ordnung ist.

Für jedes label ein for

Um eine logische Bezeihung zwischen einem Eingabefeld (input) und der entsprechenden Beschriftung (label) herzustellen sollte label mit dem for-Attribut versehen werden.

Beispiel:

for von label und id des input-Feldes sind gleich und die logische Beziehung damit hergestellt.

title-Attribute bei Links nur mit Bezug zum Link!

Wenn der Link ein title-Attribut mit ensprechendem Text besitzt dieser dieser Text einen direkten Bezug zum Link haben. Ältere Screenreader lesen den Linktext nicht mehr vor, wenn es ein title-Attribut gibt.

Dropdown- oder Flyout-Menüs nicht mit display:none; oder visibility:hidden; gestalten.

Die Links, die auf diese Art gestaltet sind, werden von den meisten Screenreadern nicht mehr vorgelesen.

Ein erklärender Link dazu. Eine alternative Formatierungsmöglichkeit ohne diese Nachteile gibt es.

Nach oben

Zusammenfassung des Tabelleninhaltes durch das Attribut summary

Dadurch kann sich der Screenreaderuser einen Überblick über den Inhalt der Tabelle verschaffen.

Kopf,- und -Fusszeilen für Tabellen definieren

Erleichtert ebenfalls die Lesbarkeit für die Screenreaderuser.

Wechselnde Seitentitel

Das jede Seite einen spezifischen Seitentitel erhalten sollte ist eigentlich selbstverständlich. Dies erhöht die Usability für alle Besucher.

Valider Quelltext

Nicht valide Seiten verlassen sich auf die Fehlerkorrekturmechanismen der Browser oder Screenreader. Das ist deshalb sicher suboptimal.

Zum Schluß noch ein allgemeiner Hinweis, um die Usability für alle zu verbessern:

Definiert eine druck.css!!

Die Browser haben eine Druckfunktion mit deren Hilfe man sich die aufgerufene Seite auch ausdrucken kann. Da ist es doch einfach ärgerlich wenn alle Bilder oder das Menü mit ausgedruckt werden. Weisser Text auf schwarzem Hintergrund kann für viel Freude beim Besucher sorgen, wenn das dann auch so ausgedruckt wird.

Die Tips erheben keinen Anspruch auf Vollständigkeit, aber helfen vielleicht dem einen oder anderen. Solltet ihr noch Tips zu diesem Thema haben, nur heraus damit!

Nach oben

Skiplinks am Anfang einer Seite, mit denen man direkt zum Inhalt und/oder zur Navigation springen kann. Das Gleiche am Ende einer jeden Seite, damit man wieder zurück zur Navigation und/oder zum Anfang Inhalt springen kann.

Damit die Durchtabber auch in den Genuß dieser Skiplinks kommen, ist es doch im Grunde nur eine Kleinigkeit die Skiplinks mit etwas CSS für diese Menschen sichtbar zu machen, wenn sie beim Durchtabben an den entsprechenden Stellen ankommen.

Zuerst das XHTML:

Es sollten nicht mehr als drei Skiplinks oben und unten sein, sonst wird es etwas unübersichtlich.

Legt euch einfach eine skiplink.htm an und speichert sie in eurem Vorlagenordner ab. Bei Bedarf können die Skiplinks einfach rauskopiert werden.

Das CSS dazu:

Damit die Skiplinktabs nicht immer ganz oben links, bzw. ganz unten links im Browser erscheinen solltet ihr #kopf und #fuss position:relative; mit auf den Weg geben, damit sich die absoluten Skiplinks daran orientieren können.

Je nachdem wo die Skiplinktabs im #kopf oder #fuss erscheinen sollen müssen die Werte für top/left angepaßt werden.

Die beiden CSS-Blöcke könnt ihr in euren vorlagen.css gespeichert werden, wo sie bei Bedarf nur noch rauskopiert werden müssen.

Das funktioniert zumindest im Firefox und Internet Explorer einwandfrei.

Wenn ich mich im WWW so umschauen, werden diese einfachen Maßnahmen um Menschen mit körperlichen Einschränkungen etwas Komfort beim Erkunden einer Website zu bieten leider so gut wie nie ergriffen.