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

Den Colour Contrast Analyzer.

Mit dem Colour Contrast Analyzer könnt ihr feststellen ob farbliche Sichtbarkeit gewährleistet ist, indem ihr damit Kombinationen von Vorder,- und-Hintergrundfarben überprüft.

Von einer guten Sichtbarkeit zweier Farben kann dann ausgegangen werden, wenn der Helligkeitsunterschied und die Farbdifferenz zwischen den beiden Farben einen bestimmten Grenzwert überschreitet.

Der vom W3C vorgeschlagene Grenzwert ist >125 für die Helligkeit und >500 für die Farbdifferenz.

Andere Stellen betrachten eine Farbdifferenz von >400 als ausreichend.

Die Benutzung ist fast selbsterklärend, hier mal ein Bild dazu:

Eine der weiteren Einsatzmöglichkeiten findet ihr z.B. unter dem Punkt Sehschwäche simulieren – Bildschirmbereiche umwandeln

Dann erscheint folgende Maske:

Rechts im Dropdownmenü unter Simulation können verschiedene Arten von Farbsehschwäche (betrifft immerhin so 8-10% überwiegend der männlichen Bevölkerung!) simuliert werden.

Außerdem kann das Bild invertiert, auf Grautöne umgestellt und Grauer Star kann simuliert werden.

Es gibt noch weitere Möglichkeiten, probiert einfach mal ein wenig rum.

Meiner Meinung nach ein nützliches Tool, was ich persönlich bei der Webseitenerstellung immer einsetze, wenn ich wegen den Farbkontrasten etwas unsicher bin.

Download:

Colour Contrast Analyzer 1