Empfehlen Sie uns weiter
  • Zu Ihrer Information

    Wenn Sie diesen Button anklicken, werden persönliche Daten an Facebook übertragen. Sind Sie damit einverstanden?

  • Zu Ihrer Information

    Wenn Sie diesen Button anklicken, werden persönliche Daten an Twitter übertragen. Sind Sie damit einverstanden?

  • Zu Ihrer Information

    Hier können Sie mittels unseres Service-Formular eine Seite empfehlen. Es werden keine persönlichen Daten gespeichert.

01. Februar 2007 | Digitales

Wie gestalte ich barrierefreie Webauftritte?

Im folgenden werden wichtige Regeln erläutert, worauf man bei der Gestaltung von barrierefreien Websites achten sollte.

„Die vollständige Bedienbarkeit ist für eine Bild­schirmauflö­sung von mindestens 800 x 600 Pixel zu gewähr­leisten.“

Hier geht es primär um die Bedienbarkeit einer Website und nicht um die optische Darstellung. Obwohl die meisten Nutzer mit einer Bildschirm­auflösung von 1024 x 768 Pixel online gehen, ist dieser Wert mit Vorsicht zu ge­nießen. Ein großer Teil von Benutzern nutzt meh­rere Programme gleichzeitig, so dass eine Vollbildauflösung für eine einzelne Anwendung Schwierigkeiten mit sich bringt. Eine Website darf grundsätzlich eine größere Auflösung als 800 Pixel in der Breite haben. Dabei kann es zu Einschränkungen in der opti­schen Darstellung kommen. Wichtig ist je­doch, dass die eigentlichen Inhalte und Elemente der Webseite, die für die Bedienung der Seite not­wendig sind, auch bei einer kleinen Bildschirm­auflösung erreichbar sind.

„Das Angebot ist auch ohne Maus, also nur mit der Tastatur bedienbar“

Die Bedienung eines Webauftritts soll geräte-un­abhängig möglich sein. Das bedeutet: Sie muss sowohl mit der Maus als auch mit der Tas­tatur funktionieren. Da die Mehrzahl der User mit der Maus arbeitet, wird die Tastaturbedienung oft vernach­lässigt.

„Die Webanwendung ist auch ohne Stylesheets (CSS) nutzbar“

Ältere Browsergenerationen und auch einige Browser aktueller mobiler Geräte unterstützen CSS nicht oder nur ungenügend. Aus diesem Grund müssen Inhalte auch ohne die Verwen­dung von Stylesheets lesbar sein. Hierbei kann eine optische Verschlechterung der Darstellung in Kauf genommen werden. Allerdings darf hier nicht eine neue Barriere beim Zugriff auf den eigentlichen Inhaltstext aufgebaut werden.

„Die Schriftgrößen sind variabel“

Aufgrund der hohen Verbreitung von Fehlsich­tigkeiten (dazu zählen auch Kurz- und Fernsich­tigkeit sowie Altersfehlsichtigkeit) ist es unver­zichtbar, dass User alle Schrift­größen mit Hilfe des verwendeten Browsers ver­ändern können. Die Festlegung auf eine Schrift­größe (weil es das Corporate Design beispielsweise so vor­schreibt) wirkt sich in der Regel als Barriere aus und wird deshalb nicht empfohlen. Die Skalierbar­keit der Schrift sollte dabei keine Änderungen im Layout nach sich ziehen (abgeschnittene Inhalte, sich überlappende Zeilen, …).

„Es werden keine Unterstreichungen verwen­det“

Unterstreichungen in Texten haben sich als Pseudostandard für Links etabliert. Deshalb soll­ten Unterstreichungen auch ausschließlich für Links verwendet werden.

„Hintergrund und Schrift heben sich kontrast­reich voneinander ab“

Bestes Beispiel hierfür ist schwarze Schrift auf weißem Hintergrund. Basiert die Navigation einer Seite auf Bildern, sollten zumindest diese Grafi­ken klar, sauber und kontrastreich sein. Statisti­sche Erhebungen gehen davon aus, dass etwa jeder zehnte Mensch farbenblind ist. Die häu­figste Variante ist die Rot-Grün-Farb­schwäche. Eher ungewöhnlich ist eine Blau-Gelb-Anomalie. Das bedeutet, dass etwa zehn Prozent der Besu­cher einer Website das vom Gestalter entworfene Layout "verfälscht" wahrnehmen. Bei vischeck.com kann man seine Seiten beziehungs­weise Bilder auf Erkennbarkeit für Farbenblinde testen.

„Grafiken sind mit aussagekräftigen Alternativ­texten beschrieben“.

Für blinde Nutzer oder für Benut­zer einfacher Textbrowser sind Grafiken nicht zugänglich. Sie werden deshalb durch aussage­kräftigen Alterna­tivtext ersetzt. Grafiken, die keine inhaltliche Re­levanz haben und nur zu dekorativen Zwecken für die Bildschirmausgabe eingesetzt werden, benö­tigen keinen Alternativtext.

„Mit Farbe dargestellte Informationen sind auch ohne Farbe nutzbar bzw. stützen sich nicht aus­schließlich darauf“

Beispiel: „Der rot eingerahmte Kasten enthält Infos ..“. Solche Texte sind nicht nur für Men­schen mit Farbsehschwächen unbrauchbar, son­dern auch für die Ausgabe auf Medien, die Far­ben nicht oder nur eingeschränkt anzeigen kön­nen.

„Das Ziel von Hyperlinks ist eindeutig identifi­zierbar (Keine Formulierungen wie „Klicken Sie hier“, sondern nur Links mit beschreibendem Text)“

Blinde Benutzer steuern oft zuerst Links an, um sich einen schnellen Überblick über den Inhalt einer Webseite zu verschaffen. Anhand einer Liste, die sämtliche Links der Seite anzeigt, kön­nen sie sich grob orientieren (auch wenn die Seite ansonsten schlecht zugänglich ist). Diese Technik kann von Blinden allerdings nur unzurei­chend genutzt werden, wenn die Linktexte gleich sind und nicht ausreichend Auskunft über das Linkziel geben. Außerdem können bei uneindeu­tiger Benennung Suchmaschinen, automatisierte Suchprogramme und andere Anwendungen die gesuchten Linkziele nicht richtig erkennen.

„Es werden keine Layouttabellen verwendet“

Layouttabellen verhindern die Trennung von Optik, Semantik und Inhalt. Dadurch ist die Nach­haltigkeit des Webauftritts nicht gewährleistet und es werden Zusatzkosten verursacht. Grundsätz­lich gilt die Verwendung von Layouttabellen bei professionellen Webagenturen bereits seit 2001 als veraltete und fehleranfällige Technik.

zurück