Barrierefreies Webdesign

Für wen ist Barrierefreiheit?

Es betrifft auch Sie

Barrierefreiheit bedeutet für viele Menschen "behindertengerecht". Doch das ist noch lange nicht alles. Nicht nur blinde und sehbehinderte Menschen stoßen auf Barrieren, sondern auch ungeübte Besucher oder solche mit veralteter Hard- und Software. Aber auch Internetprofis haben es nicht leichter: nach zehn Stunden Bildschirmarbeit sind die Augen müde und reagieren sehr empfindlich auf Blinken, und kleine Schriften sind nur schwer lesbar.

Wie macht man barrierefreies Webdesign?

Die Barrierefreiheit beginnt bereits in der Planungsphase

Wer ist Ihr Zielpublikum - welche besonderen Ansprüche hat es? Unter welchen Begriffen wird man Ihre Website suchen? Wie kann man Ihr Angebot logisch gliedern, damit sich wirklich jeder mühelos zurechtfindet? Werden schwierige Wörter (Fremdwörter oder Fachausdrücke) direkt an der Stelle ihres Erscheinens erklärt, oder gibt es ein eigenes Glossar? Diese und viele andere Fragen helfen beim Erstellen eines sinnvollen Konzeptes.

Ein Internetauftritt entsteht

Wenn das Layout fertig ist, geht es ans Programmieren. Ich selbst schreibe prinzipiell XHTML und CSS, da hier die Trennung von Design und Inhalt am klarsten ist. Was das bedeutet, habe ich schon erklärt. Wichtig ist, dass der Code fehlerfrei ist, damit Screenreader und Suchmaschinen ihn sinnvoll interpretieren können. Barrierefreie Seiten werden von den Suchmaschinen bevorzugt.

Ein Grundstein des barrierefreien Webdesigns ist die totale Trennung von Formatierung und Inhalt.

Was Suchmaschinen und Screen-Reader gemeinsam haben

Blinde Menschen benutzen Screen-Reader, eine Spezialsoftware mit synthetischer Sprachausgabe, oder eine Braille-Zeile, das ist eine auf Blindenschrift erweiterte Tastatur. Beide Geräte können Bilder nur mittels der Alternativtexte interpretieren, und verstehen dynamisch erzeugte Inhalte oft fehlerhaft oder gar nicht. Bei einem Drop-Down-Menü aus Bildern bleiben diese armen Besucher dann auf der Seite "picken", wo sie eingestiegen sind. Und sie werden sicher schnell die Flucht ergreifen.

Suchmaschinen funktionieren wie Screen-Reader, auch sie können keine Bilder interpretieren. Wenn die wichtigen Inhalte einer Website nur durch Bilder dargestellt werden, bleiben sie den Suchmaschinen verborgen. Und sie werden nicht gefunden.

Schließen Sie niemanden aus

Menschen mit Farbenblindheit scheitern oft an mangelnden Kontrasten zwischen Text und Hintergrund. Menschen mit motorischer Beeinträchtigung können die Mouse nicht oder nur eingeschränkt benutzen. Menschen mit Lernschwächen oder Konzentrationsstörungen werden durch flackernde und blinkende Bilder (die von allen Menschen als lästig wahrgenommen werden) vom Inhalt abgelenkt, bei Epileptikern kann solches Bildschirmgezappel sogar zu einem Anfall führen.

Eine barrierefreie Website ist für alle Menschen, unabhängig von deren Endgeräten, ohne Einschränkungen zugänglich.

Buchstabensalat oder browserübergreifend?

Die verschiedenen Browser legen den HTML-Code unterschiedlich aus. Der MS Internet Explorer geht bekanntlich eigene Wege (z.B. der IE 7, der nicht einmal mit seinen früheren Versionen richtig kompatibel ist); was hier gut und richtig erscheint, kann in Browsern wie Firefox, Opera oder Chrome aussehen wie Buchstabensalat auf Grafikragout mit geschnetzelten Fotos. Appetitlich, was? Nur der IE 8 ist erfreulicherweise mit Firefox und Konsorten kompatibel. Es muss auch gewährleistet sein, dass die Site auch dann ohne Inhaltsverlust funktioniert, wenn keine Plugins (z.B. Flash) vorhanden sind, wenn JavaScript deaktiviert ist, und sogar dann, wenn keine Bilder angezeigt werden. (Ich erinnere an die Nur-Bilder-Navigation aus dem zweiten Absatz.)

"Musts" für barrierefreies Webdesign

Flexibles tabellenfreies Layout, das sich an alle Endgeräte anpasst; Querscrollen sollte niemals nötig sein. Skalierbare Schriften. Einfacher und logischer Seitenaufbau. Ausreichende Farbkontraste. Browserübergreifende Programmierung - niemals Hacks verwenden, die Eigenheiten des MS Internet Explorer werden am elegantesten mit Conditional Comments behoben. Bilder müssen mit Alternativtexten und zusätzlichen Angaben ausgestattet sein, sonst erhalten Nutzer von Screenreadern nur die Information "Grafik", nichts weiter - und Suchmaschinen ebenso.