Barrierefreie WebsiteWeb für alle

CloudServer

Websites barrierefrei zu gestalten bedeutet meist auch eine Modernisierung. Dieser Workshop zeigt, wie Sie Ihr Internet-Angebot für alle Benutzer zugänglich gestalten und zukunftssicher aufbauen.

Website-Modernisierung

Barrierefreie Website

Spätestens zum Jahresende müssen alle bestehenden Web-Auftritte von öffentlichen Einrichtungen wie Bundesbehörden so überarbeitet sein, dass sie barrierefrei sind im Sinne der Barrierefreien Informationstechnik-Verordnung (BITV). Aber auch andere Informationsanbieter sollten Teile ihrer Leserschaft nicht aussperren. Meistens bedeutet eine Umstellung auf barrierefreies Design nämlich auch eine Modernisierung. Zudem wird Barrierefreiheit immer stärker als Gütesiegel verstanden, und das öffentliche Interesse an diesem Thema wächst. Der Deutsche Multimedia-Verband (DMMV) hat 2004 einen Arbeitskreis zum Thema Barrierefreiheit gegründet, unter anderem mit dem Ziel, Agenturen und Dienstleister stärker für das Thema zu sensibilisieren und mehr Transparenz zu schaffen. Denn nach wie vor herrscht Aufklärungsbedarf. Einige wesentliche Punkte, die beim Umstellen einer Website auf barrierefreies Design zu beachten sind, werden im Folgenden vorgestellt.

No Frames, please

Barrierefreie Website

Frames werden auf barrierefreien Websites nicht gern gesehen, weil Screenreader Probleme haben, die relevanten Teile der Website zu erfassen ? vermutlich ein wesentlicher Grund, warum man kaum noch auf Frame-Design im Web stößt. Wenn Frames unbedingt sein müssen, sollte eine Alternativversion der Site zur Verfügung stehen. Animierte, blinkende GIFs sind nicht nur nervtötend ? sie können bei entsprechend disponierten Betrachtern sogar epileptische Anfälle auslösen. Wenn die Animationen also unbedingt sein müssen, muss der Besucher die Wahl haben, ob er sie laden will oder nicht.

Jedes Element einer Seite muss gemäß der BITV-Verordnung »beschriftet« sein. Das bedeutet: jedes Bild muss über ein alt-Tag verfügen:

Titelgrafik

Scripting inaktiv

Barrierefreie Website

Javascript wird gern als Hilfsmittel für animierte Navigationselemente wie Aufklappmenüs eingesetzt. Davon abgesehen, dass viele Nutzer Javascript aus Sicherheitsgründen ausgeschaltet haben, kann es von Screenreadern nicht interpretiert werden. Eine barrierefreie Website muss auch ohne Javascript funktionieren.

Zwischen Schriftfarbe und Hintergrundfarbe sollte ein deutlicher Kontrast bestehen, um sicherzustellen, dass auch Leser mit Sehbehinderungen ? dazu zählen auch Farbenblinde ? die Inhalte erfassen können.

Früher wurde empfohlen, Links mittels tabindex in eine Reihenfolge zu bringen, damit diese Links ohne Maus mit der Tastatur in der festgelegten Reihenfolge angesteuert werden können. Neuere Erkenntnisse zeigen aber, dass auf einer gut strukturierten Seite, die sich an XHTML-Standards hält, der Einsatz von tabindex überflüssig ist, da die Links sowieso in der richtigen Reihenfolge vorliegen.

Weg mit den Tabellen

Barrierefreie Website

Früher ging es nicht ohne, heute sind sie lieb gewordene Überbleibsel vergangener Zeiten, von denen sich so mancher nicht gerne trennt. Grundsätzlich ist gegen Tabellen nichts zu sagen, solange sie nicht zu sehr verschachtelt sind. Aber dank CSS geht es auch ohne, seit die Unterstützung von Netscape 4.x nicht mehr Pflicht ist. Sauber gestaltet bleiben die Seiten selbst mit alten oder Nur-Text-Browsern lesbar. Und wer sich einmal an die bequeme Positionierung mittels CSS gewöhnt hat, wird auf die Tabelle als Stilmittel gar nicht mehr zurückgreifen wollen. In der praktischen Anwendung bedeutet das: Wenn Sie vorher beispielsweise eine Tabelle mit zwei Spalten hatten, um links die Navigation und rechts den Inhalt abzubilden, packen Sie in Zukunft beides in separate Container unter Verwendung des div-Tags:



Die Formatierung geschieht über ein externes Stylesheet. Der Navigationscontainer sollte vor dem Inhaltscontainer genannt werden, da die Elemente im Screenreader oder auch im Textbrowser in der Reihenfolge wiedergegeben werden, in der sie im Quelltext stehen.

Bei komplexen Tabellen bedeutet die Umstellung auf CSS einigen Arbeitsaufwand und ein »Nachstellen« des Layouts mit den neuen Mitteln. Der Arbeitsaufwand lohnt sich aber spätestens dann, wenn Veränderungen am Design vorgenommen werden sollen, weil diese dann bequem in einer einzigen Datei erledigt werden können. Bei dieser Gelegenheit bietet sich gleich eine Überprüfung des bestehenden Designs an.

Trennung von Form und Inhalt

Barrierefreie Website

Wenn die Formatierung in ein externes Stylesheet ausgelagert wird, ist es möglich, Form und Inhalt sauber voneinander zu trennen. Das macht zum einen die Verwaltung und Aktualisierung einfacher, zum anderen ist die Website für Screenreader und Textbrowser leichter lesbar. Grundsätzlich können Sie ein Stylesheet in jedem Text- oder HTML-Editor bearbeiten. Komfortabler geht es mit speziellen Stylesheet-Editoren wie Topstyle (www.bradsoft.com). Die Einbindung des Stylesheets erfolgt im head-Abschnitt des HTML-Dokuments:


Beispielseite für Barrierefreiheit<

Im Beispiel befindet sich das Stylesheet im Unterverzeichnis System.

Logischer Aufbau der Navigation

Barrierefreie Website

Wie in alten Zeiten kann man nun die Navigation ohne jede Formatierung notieren: