Implementierung barrierefreier Sites

Webentwickler und -designer werden manchmal von der Angst geplagt, die barrierefreie Gestaltung einer Site würde sie einschränken. Das ist nur teilweise richtig. Es ist eher so, dass ein sensiblerer Umgang mit dem Medium gefragt ist.

Ganz ohne dass die gestalterische Freiheit eingeschränkt wird, kann man Überschriften, wie oben bereits erwähnt, durch strukturierende Tags kennzeichnen. Statt

                                           
			<p class="headline">Ein Abschnitt<p>

oder gar

                                           
			<font size="16pt">Ein Abschnitt</font>

schreibt man

			<h1>Ein Abschnitt</h1>

Das hat nicht nur den Vorteil, dass ein Screenreader beim Vorlesen den Text so betont, dass der Zuhörer die Überschrift erkennen kann. Der Code wird zudem deutlich einfacher. Wenn man das veraltete font-Tag verwendet, definiert man die Schriftart meist auch für jede Überschrift neu, so dass der Code nahezu unwartbar wird. Gegenüber der ersten hat die letzte Variante den Vorteil, dass man auf die Angabe einer Stylesheet-Klasse verzichten kann.

Der Verzicht auf Frames ist eine ebenso freundliche Geste wie der Verzicht auf sogenannte Popup-Fenster. Gerade dadurch werden nicht nur Zugangsbeschränkungen abgebaut. Auch auf die Indizierung der Site durch Suchmaschinen haben diese Maßnahmen positive Auswirkungen.

Möchte man die vielerseits beliebten Popup-Fenster trotzdem verwenden, sollte man bei der Implementierung mit Bedacht vorgehen. Oft wird dabei nämlich JavaScript verwendet, um das Fenster beim Öffnen korrekt zu positionieren. Meistens geschieht das in folgender Form:

                                           
			<a href="javascript:window.open('popup.html','popup',
			                                'scrollbars=yes,toolbar=no,'
			                                +'locationbar=no,statusbar=no,'
			                                +'width=200,height=400');">
			  Popup
			</a>

Dabei wird Benutzern, die einen Browser benutzen, der kein JavaScript unterstützt, der Zugang versperrt. Der Link lässt sich aber auch anders schreiben:

                                           
			<a href="popup.html"
			   onClick="window.open('popup.html','popup',
			                        'scrollbars=yes,toolbar=no,'
			                        +'locationbar=no,statusbar=no,'
			                        +'width=200,height=400');
			            return false;" />
			  Popup
			</a>

In dieser Variante verhält sich der Browser bei aktiviertem JavaScript genauso wie im ersten Fall. Dadurch, dass vom Skript false zurückgegeben wird, wird die vordefinierte Aktion, nämlich dem Link im href-Attribut zu folgen, unterbunden. Bei deaktiviertem JavaScript wird jedoch anders als im ersten Fall die Seite popup.html im gleichen Browserfenster angezeigt, und der Benutzer kann mit dem ,,Zurück``-Schalter zur vorherigen Seite wechseln. Falls man gleichzeitig verhindern will, dass Formularinhalte durch den Seitenwechsel verloren gehen, kann man als Attribut target="_blank" hinzufügen, so dass alle Browser, die diese Funktion unterstützen, ein neues Fenster öffnen.

Die richtige Verwendung von visuellen Elementen illustriert folgendes Beispiel:

                                           
			<img src="balkendiagramm.gif"
			     alt="Wahlergebnisse 2004: Orange Partei 17%,
			          Lila Partei 19%, Gelbe Partei 24%, 
			          Blaue Partei 7%, Gestreifte Partei 33%" />
		

Das Balkendiagramm selbst ist natürlich kontrastreich, und die darin enthaltene Schrift ist groß und gut zu lesen. Schön wäre an dieser Stelle die Verwendung eines skalierbaren Grafikformates wie SVG, es wird aber leider noch nicht von genügend vielen Browsern unterstützt.

Ganz im allgemeinen sind skalierbare Formate nicht-skalierbaren vorzuziehen. So ist auch die Größnangabe in em der in px vorzuziehen. Die Einheit em bezieht sich dabei auf die größe des Buchstaben ,,M`` in der vom Benutzer eingestellten Schriftgröße.

Einen Nachteil hat dieses Vorgehen: Wenn man die Site so weit wie möglich skalierbar gestaltet, kann es passieren, dass das Design unter Umständen auseinanderreißt. Der Stand der Browsertechnologie zwingt uns zur Zeit noch, skalierbare Elemente mit nicht-skalierbaren Bitmaps zu mischen. Wenn die Schrift im Browser zu groß eingestellt wird, stimmen die Proportionen zu den oft als Schmuckelemente eingesetzten Grafiken nicht mehr. Wenn man einen Farbverlauf als Hintergrund für eine Navigationsleiste verwendet, kommt man zur Zeit nicht darum herum, eine Bitmap einzusetzen. Dabei kann es passieren, dass bei einigen Benutzern die Schrift über den Farbverlauf hinausragt. Man kann dem entgegenwirken, indem man diesen Fall schon im Design berücksichtigt und ausreichend Spielraum lässt. Auch bei der Umsetzung kann man durch geschicktes Vorgehen derartige Probleme lindern, etwa, indem man Farbverläufe in fixe Hintergrundfarben übergehen lässt. Dass man Probleme meistens nicht ganz vermeiden kann, ist nicht wirklich schlimm: Schließlich wird dadurch niemandem der Zugang zu den Inhalten versperrt.

Unabhängig davon, welche Techniken man einsetzt und wie viel Zeit man in die barrierefreie Umsetzung investiert, bleibt das Wichtigste im Projektablauf der Test. Es ist zu empfehlen, dass jemand, der sonst nicht am Projekt beteiligt ist, die Site anhand der Checkliste des W3C prüft. Und es sollte keine zu große Mühe sein, sich die Site einmal ohne JavaScript mit einem Textbrowser anzuschauen.