WWW für alle

Wie Webdesign barrierefrei gemacht werden kann

von Jan Eric Hellbusch

Gehostet auf der Website http://www.matthias-haenel.de/

"WWW für alle" ist an professionellen Webgestalter gerichtet. Mit der Feststellung, daß sich die Gestaltungsmöglichkeiten im Web mit einer Höchstgeschwindigkeit weiterentwickeln, ist es nicht verwunderlich, daß keiner alle oder gar nur die meisten Antworten hat auf die Frage, wie kann Webdesign barrierefrei gestaltet werden. Wir können alle voneinander lernen. Im Idealfall ist diese Seite ein Angebot zur Zusammenarbeit zwischen dem Projekt Barrierefrei Informieren und Kommunizieren und den Lesern. Falls Sie Fragen, Vorschläge oder Ideen haben, die Sie teilen möchten, nehmen Sie kontakt mit Jan Eric Hellbusch auf.


Wir müssen alle ab und zu daran erinnert werden, daß nicht jeder die gleichen Möglichkeiten hat.

Nein, dies ist kein Artikel darüber, wie und wo Sie Ihre Webseite am besten unterbringen. Dieser Text beschreibt, wie Webseiten für alle zugänglich gemacht werden. Insbesondere werden die Aspekte angesprochen, die Blinden und Sehbehinderten den Zugang ermöglichen.

Allein in Deutschland gibt es acht Millionen Menschen mit einer Behinderung, und viele von ihnen haben Schwierigkeiten, auf unbedacht gestaltete Webseiten zuzugreifen. Dies liegt nicht daran, daß es keine Möglichkeiten zur behindertengerechten Gestaltung gibt. Vielmehr ist es den Webgestaltern gar nicht bewußt, welche Barrieren sie bestimmten Nutzergruppen vorsetzen.

Eine Webseite barrierefrei zu gestalten ist wie die Gestaltung eines rollstuhlgerechten Gebäudes. Die Hauptursache für Barrieren liegt in der fehlenden Berücksichtigung des Zugangs für Menschen mit Behinderungen während der Entwicklungsphase. Dabei wird eine nachträgliche Verbesserung deutlich aufwendiger.

Grundprobleme

Einer der größten Schwierigkeiten vor allem blinder und sehbehinderter Webnutzer ist die Verfolgung grafischer Hyperlinks auf einer Webseite. Ein grafischer Link oder Image-Maps ohne Alternativtext (alt-Attribut) sind z.T. "unsichtbar" für Blinde und Sehbehinderte. Gleichermaßen können eng beinander angeordnete Links z.B. von jemandem mit motorischen Schwächen nur schwer mit dem Mauszeiger angewählt werden (Im übrigen auch ein Problem für Senioren sowie die "Butterfinger" unter den nominell als "nicht behindert" eingestuften Webnutzern).

Für Sehbehinderte gibt es zwei ganz spezielle Schwierigkeiten: Farbauswahl bzw. Kontraste auf einer Seite und Skalierung von Schrift und vom Layout einer Seite. Webdesigner sollten bei der Farbgebung von Texten und Hintergrund darauf achten, daß diese Farben sich deutlich voneinander unterscheiden. Dabei sollten nur Grundfarben von vorneherein definiert werden und nicht jedes einzelne Element. Diese "Regel" für Kontrast gilt selbstverständlich auch bei der Gestaltung von Grafiken. Statt mit festen Schriftgrößen (Pixelangaben) sollte die Festlegung der Schriftgrößen immer relativ zur Basisschriftgröße des Benutzers definiert werden. Die Verwendung der CSS-Einheit em erlaubt den sehbehinderten Benutzern, ihre Standard-Schriftgröße selbst zu wählen und damit Vergrößerungen und Verkleinerungen im Text selbst zu bestimmen. Wenn Inhalte mit Tabellen formattiert werden, müssen aus Sicht einer Sehbehinderung die Tabellen relativ zur Bildschirmbreite definiert werden. Leider ist es so, daß nur die allerwenigsten Browser (Opera und Mozilla voran, MSIE nur bedingt) überhaupt die Möglichkeit bieten, eigene Schriftgrößen vorzudefinieren. Wie auch immer eine Seite gestaltet wird, es ist zu vermeiden, daß %-Angaben und absolute Pixelgrößen vermischt werden. Dadurch wird vermieden, daß manche Textteile fest (und viel zu klein) erscheinen, während andere sich gut mit den Browsereinstellungen vergrößern lassen.

Die Liste der Barrieren läßt sich fortführen: Blinde und sehbehinderte Surfer verwenden sogenannte "Screen-Reader", um grafische Oberflächen zu lesen. Die Screen-Reader erfassen den Bildschirmtext und geben diese per synthetischer Sprachausgabe oder über eine Braille-Ausgabe an den Nutzer aus. Die Screen Reader sind essentiell, bringen aber eigene Schwierigkeiten mit sich, z.B. müssen Tabeellenzellen sequentiell angeordnet werden und es dürfen keine Client-seitigen JavaScripts zur dynamischen Erstellung von Inhalten verwendet werden, wenn Nutzer von Screen-Readern die Inhalte lesen sollen. Viele Hinweise werden bei Trace Research & Development Center (University of Wisconsin) diskutiert. Es sind Vorschlägen enthalten für die sehbehindertengerechte Gestaltung von Webseiten in Anlehnung an den Richtlinien des Center for Information Technology Accommodation - jetzt in der amerikanischen Section 508 eingeflossen - enthalten.

Cascading Style Sheets

Das Konzept der Cascading Style Sheets bietet weitesgehend in allen gängigen Browsern sehr zufriedenstellende Möglichkeiten der Skalierung der Schriftgrößen. Dieser Weg erlaubt es, Textelemente auf vielfältigster Weise vorzudefinieren, und das auf multipler Weise für jedes Element. Die Vorzüge im Einzelnen:

  1. alle Textelemente können in Größe, Farbe, Schriftart, Abstände u.v.m. einzeln, gruppiert oder global vordefiniert werden,
  2. eine beliebige Zahl zusätzlicher Erkennunngsnamen (IDs) und Klassen können vordefiniert werden, die bei Bedarf einzelnen Textelementen zusätzlich zu den globalen Definitionen zugeordnet werden können,
  3. ein sehr simpler Syntax erlaubt eine schnelle Implementierung,
  4. alle gängigen Browser können CSS ein- und ausschalten (andere Browser ignorieren sie). Bei HTML-Formatierung ist dies nicht möglich.

Eine Anleitung, wie Sie am besten an CSS herangehen, finden Sie auf http://www.barrierefreies-webdesign.de/ knowhow/ css-design/.

Das World Wide Web Consortium (W3C) hat 1997 die Web Accessibility Initiative (WAI) gegründet, die dafür sorgt, die in allen neuen Standards für das Internet die Barrierefreiheit berücksichtigt wird. Wesentliche Erkenntnisse für die Gestaltung von barrierefreien Seiten sind in den Standard HTML 4.01 eingeflossen. Für Menschen mit Behinderungen ist die wichtigste Teil der HTML-Richtlinie die Unterstützung von Cascading Style Sheets. Wenn ein Dokument so strukturiert ist, daß sich Information und Präsentation voneinander trennen lassen, dann kann der Benutzer entscheiden, ob das Design der Website oder ein anderes CSS geeigneter für die individuellen Bedürfnisse ist.

Die angesprochenen Aspekte bedeuten keine Einschränkung Ihrer Freiheit und Kreativität bei der Gestaltung Ihrer Webseiten. Ihre Berücksichtigung ist auch nicht problematisch. Wahrscheinlich sind Ihnen bereits beim Lesen dieses Artikels einigen Ideen zur barrierefreien Gestaltung gekommen!

Wichtig ist, daß die Darstellungsform Ihrer Informationen im Internet für den Besucher nicht zwingend ist.

Sie können Style Sheets benutzen oder Ihre Informationen auf verschiedenen Gestaltungsebenen darstellen, z.B. für den Bildschirm oder für einen Palmtop. Wenn Sie mit CSS arbeiten, so erzeugen Sie automatisch eine gut strukturierte seite, die auch für blinde Nutzer sehr gut zu benutzen ist. Ein guter Test ist immer der zeilenorientierte Lynx-Browser, aber auch im Opera 7-Browser kann man die Style-Sheets sehr bequem ein- und ausschalten. Die Trennung von Präsentationsebene und Informationsebene ist - einfach ausgedrückt - gute Website-Gestaltung. Dies ist ohnehin einer der wichtigen Elemente von SGML-Sprachen wie HTML und erst Recht von XML!

Einige Organisationen üben bereits blindengerechte Webgestaltung aus. Der deutsche Bundestag ist mit gutem Beispiel vorangegangen, indem er im Jahr 1999 sein komplettes WWW-Angebot zugänglich für Blinde gemacht hat. Auch weitere öffentliche Institutionen, wie etwa der Landeswohlfahrtsverband Hessen oder der Saarländische Rundfunk, versuchten frühzeitig ihre Versorgungspflicht nachzukommen. Der PR-Direktor von Amazon.de, dessen Webpräsenz im Dezember 1999 einen vom Behindertenverein BiGuB verliehenen Preis für besonders gut zugängliches Webdesign erhalten hat, sagte bei der Preisverleihung, "Für jeden Kaufmann wäre es unsinnig, eine Personnengruppe von 10% der Bevölkerung seiner möglichen Kunden aus der Nutzung seines Angebots auszuschließen.".

Weitere Informationen

Das WWW bietet natürlich viele Informationen zur Gestaltung barrierefreier Webseiten an. Sehr nützliche Sites sind beispielsweise Barrierefreies Webdesign mit Informationen zum gleichnamigen Buch sowie vielen weiteren Artikeln, Einfach für Alle (EfA) der Aktion Mensch mit aktuellen Informationen und das Projekt Barrierefrei Informieren und Kommunizieren mit seinem kostenlosen Beratungsangebot. Auf allen drei Sites finden Sie weitere Links. Ein sehr nützliches Programm, das alle Schwachstellen Ihrer Internetseiten hinsichtlich des barrierefreien Zugangs aufzeigt, finden Sie unter Watchfire - Bobby. Die in Deutschland geltende Barrierefreie Informationstechnik-Verordnung (BITV) mit zahlreichen Richtlinien finden Sie u.a. auf http://www.barrierefreies-webdesign.de/bitv/bedingungen.php zu finden. Schliesslich ist natürlich auch das W3C mit unendlichen weiteren Informationen zu nennen.

Viele Webgestalter benutzen allerdings grafische HTML-Editoren oder exportieren HTML-Dateien aus ihren Office-Anwendungen. Diese Hilfen erlauben den Gestaltern, ein Dokument zu schreiben und formatieren, ohne die Umsetzung in gültigem HTML kontrollieren zu müssen. In der überwiegenden Zahl von Anwendungen, die Webseiten exportieren, führt zu keinem barrierefreien Ergebnis.

Die Berücksichtigung barrierefreier Aspekte der Gestaltung bringt weitere Vorteile mit sich. Wenn Sie den obengenannten Test für die Zugänglichkeit nehmen, werden Sie den gesunden Menschenverstand Ihrer Webgestalter überprüfen können. Der Test erinnert den Gestaltern daran, den Aufbau der Seiten beständig und einfach zu halten und keine Spielereien einzubauen, nur weil sie in der Lage sind, dies zu tun. Letzteres wird immer mehr zu einem Berufshobby aller Publizierenden, nicht nur der Webseiten-Gestalter. Wir müssen alle ab und zu daran erinnert werden.


Zur Startseite von http://www.matthias-haenel.de/.

Kontakt zum Autor dieses Beitrags:

Jan Eric Hellbusch
Carl-Strehl-Straße 3
D - 35039 Marburg
Tel.: (+49) 163 3369925
Web: http://www.barrierefreies-webdesign.de/kontakt.php