Barrierefreie Website
Web 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:

Das title-Attribut sorgt dafür, dass der jeweilige Menüpunkt beim Überfahren mit der Maus als Tooltipp angezeigt wird. Gleichzeitig sorgt es für eine bessere Strukturierung und gibt die Möglichkeit, den Menüpunkt etwas ausführlicher zu beschreiben, wenn im Layout nur wenig Platz zur Verfügung steht. Allerdings sollte der Text unter title nicht einfach eine Wiederholung des Menütextes sein, sondern zusätzliche Informationen bieten oder eine alternative Wortwahl.

Die beliebte Praxis, Schriftzeichen wie | oder :: zur Menügestaltung zu verwenden, ist beim Vorlesen durch den Screenreader lästig, da dieser die Zeichen nicht als Layout-Elemente erkennt und entsprechend ihrer ursprünglichen Bedeutung vorliest. Insofern sollte darauf verzichtet werden.


Komplexe Navigation

Barrierefreie Website

Bei einfachen Navigationen führt dies bereits zu befriedigenden Ergebnissen. Ist die Navigation ausführlicher und komplexer, empfiehlt es sich, sie als (ungeordnete) Liste aufzubauen:

Um die unter Umständen störenden Bulletpoints vor den einzelnen Listenelementen im Stylesheet auszublenden, benötigen Sie folgende Zeile:

div#navigation ul {
list-style: none;
}

Bei komplexen Navigationen kann man die einzelnen Menüpunkte auch nummerieren und Punkte als Trennzeichen einbauen, die nur beim Vorlesen durch den Screenreader relevant sind und durch entsprechende CSS-Formatierung im normalen Browser nicht sichtbar sind.

Einen sehr ausführlichen und gut gemachten Workshop mit downloadbaren Beispielen zum Thema und der Einladung zur Diskussion finden Sie auf der Website von Einfach für alle (www.einfach-fuer-alle.de/artikel/menues).


Tools zum Testen

Barrierefreie Website

Wie bei jedem anderen Webprojekt lautet vor dem Start der neuen Website die Devise: Testen, testen, testen. Es gibt einige unverzichtbare Programme, mit denen Sie die neuen Funktionalitäten ausprobieren sollten. Diese und ähnliche Tools werden auch von Ihren Besuchern mit Behinderungen benutzt. Auf diese Weise können Sie testen, ob eine Navigation auch dann noch gut funktioniert, wenn sie vorgelesen wird, und ob alle Bereiche der Website erreichbar sind.

Jaws (www.freedomsci.de) ist ein Screenreader, mit dessen Hilfe viele Anwendungsprogramme über Sprachausgabe beziehungsweise Braillezeile genutzt werden können. Das Programm lässt sich individuell konfigurieren. Eine für jeweils 40 Minuten lauffähige Demoversion kann auf der Website des Herstellers heruntergeladen werden.

Der Text-Browser Lynx (lynx.browser.org) ist für Unix, VMS, Windows 95/98/NT und OS/2 verfügbar und vermittelt einen guten Eindruck, wie eine Website sich für einen Blinden darstellt. Eine Online-Simulation von Lynx ist unter www.delorie.com/web/lynxview.html verfügbar.

Tablin (www.w3.org/WAI/Resources/Tablin) ist ein so genannter HTML Table Linearizer und gibt Tabellen so aus, wie sie ein Screenreader ausgeben würde. Das Tool ist als Online-Service oder als Java-Source für den lokalen Betrieb verfügbar.

Mit dem Online-Simulator Color Laboratory (colorlab.wickline.org/colorblind/colorlab) können Farben so dargestellt werden, wie sie für einen Farbenblinden sichtbar sind. Dabei stehen verschiedene Ausprägungen von Farbenblindheit zur Auswahl.

Die Evaluation, Repair and Transformation Tools for
Web Content Accessibility (www.w3.org/WAI/ER/existingtools.htm) sind eine englischsprachige Tool-Sammlung, die beim Testen und Umwandeln in eine barrierefreie Website behilflich sein sollen.


Fazit

Barrierefreie Website

Wer sich die Mühe macht, seine Website auf Accessibility umzustellen, lernt nicht nur eine Menge über CSS, sondern strukturiert die Site auch sauber und logisch. Sehr positiver Nebeneffekt: Suchmaschinen wie Google können die Seiten wesentlich besser indizieren.

Alle Dateien und Beispiele aus dem Workshop finden Sie auf der Heft-DVD und unter listings.internet-pro.de.