Barrierefreiheit: Tipps zur Umsetzung

geschrieben von Marion Engel am 9. Juni 2008 um 8:43 Uhr

Wie in meinem Einführungsbeitrag zur Barrierefreiheit versprochen, hier nun ein paar konkrete Tipps, wie man beim Design und bei der Programmierung von Web-Seiten zumindest einige Barrieren umgehen kann. Das Schöne daran ist, dass man mit einer Maßnahme gleich mehrere “Fliegen erschlagen” kann, dass es also mehrere Nutznießer und positive Effekte gibt.

Der erste Schritt auf dem Weg zur neuen Web-Site liegt darin, eine Seiten- und Navigationsstruktur zu erarbeiten. Hierbei gehen natürlich Usability und Barrierefreiheit Hand in Hand, denn eine schwer verständliche Struktur stellt ganz klar eine Barriere dar. Der Aufbau der Site muss logisch und klar strukturiert sein, und zwar nicht nur für den Firmen-Insider, sondern auch für den Besucher, der mit dem Portfolio oder der Firmen-Terminologie nicht auf Du und Du ist. Die Informationen sollten ihm häppchenweise angeboten werden, vom Allgemeinen zum Speziellen gehend. Der Benutzer sollte also zunächst abschätzen können, welche Informationen vorhanden sind. Dann hat er die Wahl, zu entscheiden, wo er im Detail weiterlesen möchte. Nach dieser Logik sollten beispielsweise in pdf-Dateien nur sehr spezielle Detailinformationen enthalten sein, die sich nicht in HTML darstellen lassen. Denn pdf-Dateien sind für Screenreader und somit Sehbehinderte Menschen nur sehr eingeschränkt zugänglich.

Einen guten Überblick bietet eine Sitemap, die für Menschen und auch Suchmaschinen zum Standardangebot gehören sollte. Je nach Zielgruppe, Thema und Seitenstruktur können auch spezielle Hilfeseiten nützlich sein. Ob sie nun Hinweise für die Benutzung der Seite enthalten oder häufig gestellte Fragen auf einen Blick beantworten – erlaubt ist alles, was die Benutzung erleichtert.

Im Rahmen der Strukturierung sollte man sich auch immer mal wieder den Spruch “Weniger ist mehr” zu Herzen nehmen, und weder die Seiten selber noch die Navigationspunkte überladen. Es gibt ja verschiedene Untersuchungen, wieviele optische Eindrücke Menschen auf einmal wahrnehmen können. Demnach sollte eine Navigation nicht mehr als 7 Unterpunkte aufweisen. Werden es wesentlich mehr, ist das ein Hinweis darauf, dass eine weitere Unterteilung sinnvoll ist.

Der nächste Schritt auf dem Weg zur neuen Website besteht in der Entwicklung des Layouts. Eine Regel sollte sich eigentlich von selbst verstehen, aber trotzdem findet man immer wieder Abweichungen davon: Gleiche Elemente sollten auf den unterschiedlichen Seiten immer gleich gestaltet werden, damit der Benutzer einmal erworbenes Wissen auf der gesamten Web-Site anwenden kann und sich nicht jedes Mal wieder neu orientieren muss.

Der Einsatz von Farben und die Farbwahl an sich sind ein komplexes Thema, über das sich trefflich streiten lässt, da ja auch die Geschmäcker verschieden sind. Klar ist, dass die Kontraste zwischen Hintergrund und Vordergrund ausreichend groß sein müssen. Dies ist ja auch ein wichtiges Kriterium für die Suchmaschinen, die durch die Messung des Kontrasts Black-Hat-SEOs ausschließen möchten, die den berühmten weißen Text auf weißem Grund verwenden, der nur von Suchmaschinen im Code gelesen, aber nicht von den menschlichen Besuchern erkannt werden kann.
Farbleitsysteme sind für normalsichtige Web-Surfer oftmals eine feine Sache. Allerdings sollte die Farbe nicht das einzige Mittel sein, das die Bedeutung trägt.

Sehr wichtig für eine Website sind natürlich auch die Texte und die dafür verwendete Sprache. Hier finden alle Seiten besondere Anerkennung, die eine klare und einfache Sprache aufweisen können. Selbst komplizierte Sachverhalte lassen sich einfach darstellen – wenn der Autor nur will. Denn bekanntermaßen muss sich beim Text immer einer anstrengen, entweder der Autor oder der Leser. Da aber gerade im Web jeder Leser die Wahl zwischen vielen verschiedenen Seiten hat, wird er sich nicht sehr lange mit einem schwer verständlichen Text plagen, sondern die Seite schnell verlassen.

Linktexte sollten immer sprechend und individuell sein. Enthält eine Seite mehrere Teaser-Texte mit den berühmten “mehr”-Links, so liest ein Screenreader natürlich immer nur diesen Text vor, und der bedauernswerte Benutzer verliert zwangsläufig den Überblick über die Links. Und auch die Suchmaschinen können mit “mehr” oder “weiterlesen” auch nicht wirklich viel anfangen, denn sie gehen davon aus, dass sie darüber zu einem Text zum Thema “mehr” oder “weiterlesen” kommen. Hier wird also wertvolle Link-Power verschenkt.
Ähnlich verhält es sich auch mit Bildern, die sowohl blinde Benutzer als auch Suchmaschinenspider nicht erkennen können. Deshalb sollte das Alt-Tag das beschreiben, was Normalsichtige auf dem Bild sehen und was sie dabei denken (sollen). Bilder, die keine Bedeutung tragen (z.B. Trennlinien), benötigen natürlich kein Alt-Tag und sollten auch keines bekommen, da dies den Vorlesefluss der Screenreader unnötig unterbrechen würde.

Und – last but not least – die Programmierung. Auch hier lassen sich einige Maßnahmen im Dienste der Barrierefreiheit für Menschen mit der Suchmaschinenoptimierung verbinden. An erster Stelle steht valider Code, Code also, der die Prüfung des W3C besteht, den Regeln entspricht und von allen Browsern ohne eigene Interpretationen angezeigt werden kann.
Bei der Programmierung ist ebenfalls wichtig, Gestaltung und Inhalte zu trennen, also nicht nur alle Formatierungen in CSS-Dateien auszulagern, sondern auch die Standardelemente wie <h1>, <h2> usw. zur Strukturierung zu verwenden. Denn nur so wissen Screenreader und Suchmaschinen, wo sie eine wichtige Überschrift finden, was ihnen bei individuellen div-Tags im Style Sheet nicht möglich ist.

Um schließlich den Benutzern die Freiheit zu geben, die Seite entsprechend ihrer Sehstärke zu skalieren, müssen alle Größenangaben relativ sein, also in % oder em und nicht in px. Und auch die Freiheit, den Lautsprecher abzuschalten, sollte nicht dazu führen, dass Warnungen untergehen. Wenn also auf der Webseite vor irgendwas gewarnt oder auf ein akutes Ereignis hingewiesen werden soll, muss dies sowohl akustisch als auch optisch erfolgen.

So schwierig ist es also nicht, zumindest barrierearme Webseiten zu erstellen, oder? Wer sich die Maximierung des Nutzens ihrer Kunden zum Ziel setzt und alles auch aus der Sicht seiner Kunden betrachtet, ist auf dem besten Weg zu einer barrierearmen Website mit hoher Usability.

Bookmark and Share

Verpassen Sie keinen Beitrag und abonnieren Sie unseren RSS-Feed.

2 Kommentare

2 Kommentare zu “Barrierefreiheit: Tipps zur Umsetzung”

  1. 10 Lesetipps der Woche für Shopbetreiber » Tipps, Muster, Checklisten, News, Urteile für Online-Händler » shopbetreiber-blog.de schrieb:
    11. Juni 2008 um 15:12

    [...] Barrierefreiheit: Tipps zur Umsetzung von TechDivision [...]

  2. Hannes Oestreich schrieb:
    19. Juni 2008 um 16:49

    EMs sind schon ne feine Sache ich bin jedoch der Meinung, dass sich diese Geschichte eh in nächster Zukunft erledigt haben wird, da der Seiten-Zoom der Technik der Schriften-Skalierung eh überlegen ist und sich auf lange Sicht durchsetzen wird. Dennoch bastel auch ich bis dahin weiterhin schön mit em Angaben. Naja und an sich können modernen Browser auch ohne Problme px Angaben skalieren.

Kommentar abgeben