Barrierefreie Webseiten gestalten

In folgendem Artikel erfahren Sie, wie Webseiten barrierefrei und behindertengerecht gestaltet werden können.

Als Praxisbeispiel dient die neue Webseite, die wir für die OWB erstellt haben. Die OWB ist ein gemeinnütziges Unternehmen, das in und um Ravensburg Arbeitsplätze, Wohnmöglichkeiten, Freizeit- und Bildungsangebote für Menschen mit geistigen und mehrfachen Behinderungen bereitstellt. Das Ziel der Werkstätten ist es, möglichst viele Mitarbeiter auf den allgemeinen Arbeitsmarkt zu vermitteln. Die Mitarbeiter durchlaufen dazu individuell abgestimmte Qualifizierungen, angefangen von einfachsten Handgriffen bis hin zu hoch qualifizierten Tätigkeiten. Die bestehende Präsenz der OWB war eine "gewachsene" Webseite, deren Struktur auf firmeninternen Zusammenhängen basierte und für den Betrachter von außen schwer zu durchschauen war.

Die Gestaltung wirkte überholt, die Sprache distanziert. Bildmaterial war spärlich und winzig klein im Einsatz. Unsere Aufgabe bestand darin, eine Internetpräsenz zu schaffen, die den Alltag in der OWB abbildet, um neue Mitarbeiter für die angebotenen Werkstatt-Arbeitsplätze zu gewinnen. Die Herausforderung war also, die Inhalte speziell für diese Zielgruppe optimal zugänglich zu machen.

Struktur

Wir entschieden uns, die Hierarchie der Webseite so flach wie möglich zu halten, um eine einfache Navigation zu gewährleisten. Dazu haben wir sämtliche Inhalte der bestehenden Webseite sowie der aktuellen Printbroschüren in ihre Bestandteile zerlegt und auf farbige Moderationskärtchen geschrieben. Dabei kristallisierten sich vier Hauptbereiche heraus, die in den Ausgangsmaterialien in weiten Teilen vermischt waren: Arbeit, Wohnen, Freizeit und Bildung. Wir beschlossen, diese als neue Gliederung der Webseite zu nutzen und ordneten die Kärtchen diesen vier Bereichen zu. 

In einem Treffen mit dem Kunden reproduzierten wir dieses Ergebnis, wobei dieser Gelegenheit hatte, weitere Wünsche und Themen einzubringen sowie veraltete Informationen auszusortieren. So entstand schnell eine Struktur, die sowohl der Zielgruppe als auch firmeninternen Zusammenhängen gerecht wurde. Insgesamt kamen wir dabei mit drei Hierarchieebenen aus, in den vier Kernbereichen Arbeit, Wohnen, Freizeit und Bildung sogar mit nur zwei Ebenen.

Beim anschließenden Werkstattrundgang und gemeinsamen Essen in der Werkskantine gewannen wir wertvolle Einblicke in den Tagesablauf der Mitarbeiter. Die Menschen waren gut gelaunt, der Umgang war offen und freundlich, Geschäftsführung und Mitarbeiter saßen beim Mittagessen am selben Tisch. Bei der Arbeit wirkten die Mitarbeiter hoch konzentriert und professionell. Diese Stimmung, so beschlossen wir gemeinsam mit dem Kunden, galt es für die Ansprache einzufangen.

Die neue Bildsprache

Während auf der bestehenden Webseite und in den Broschüren vornehmlich über die Menschen mit Behinderung gesprochen wurde und in vielen Fotos die betreuenden Personen im Vordergrund standen, sollten auf der neuen Webseite die behinderten Menschen komplett in den Vordergrund rücken; und zwar so, wie wir sie in Ravensburg erlebt hatten: offen, gerade heraus und freundlich, dabei dabei immer bei der Sache und sachverständig.

Wir suchten für den Kopfbereich der Seiten vorzugsweise Fotos aus, auf denen die Personen den Betrachter anlächeln. Den Bildausschnitt wählten wir jeweils so, dass das Gesicht einen großen Raum einnimmt. Nahaufnahmen von Gesichtern wecken beim Betrachter Empathie. Und die Identifikation des Betrachters mit der abgebildeten Person ist ein erster Schritt, neue Werkstattmitarbeiter zu gewinnen.

Für viele Menschen mit Lernschwierigkeiten ist das Lesen längerer Texte sehr anstrengend. Daher entschlossen wir uns, im Inhaltsbereich möglichst mit erzählenden Bildstrecken zu arbeiten, um Details einzelner Werkstattarbeitsplätze oder Wohnmöglichkeiten zu beschreiben. Diese Bilder sollen konkrete Situationen und Abläufe zeigen, um einen genauen Eindruck zu vermitteln, selbst wenn man den zugehörigen Text nicht lesen möchte oder kann. 

Die Bildsprache ist an dieser Stelle also eine andere: eine neutral beobachtende Perspektive, aus der die Tätigkeiten und die Umgebung in den Vordergrund rücken. Die Nutzer bewegen sich auf drei Arten durch die Bildstrecken: Sie können sowohl auf die Pfeile als auch auf die Bildnummern am linken Rand klicken, aber selbstverständlich auch einfach mit den Pfeiltasten der Tastatur navigieren.

Die Texte

Wie eingangs gesagt, wirkten die Texte auf der bestehenden Webseite und in den Broschüren sehr distanziert. Die neuen Texte sollten sachlich, aber keineswegs distanziert klingen. Dies erreichten wir durch eine direkte Ansprache des Lesers. Wir arbeiteten dabei mit einer professionellen Texterin zusammen - eine Investition, die sich immer lohnt, aber zu selten getätigt wird. Leicht verständliche Texte sind das Herzstück jeder guten Webseite. 

Dazu eine Anmerkung: Erwachsene Menschen - ob mit oder ohne Behinderung - werden zunächst einmal gesiezt. Leider fühlt sich so mancher aufgrund der vermeintlich kindlichen Art einiger Menschen mit Lernschwierigkeiten dazu verleitet, gleich zum Du überzugehen. Das ist unhöflich und könnte falsch beim Leser ankommen.

Barrierefreiheit hat auch viel mit Respekt zu tun. Darüber hinaus ließen wir die Texte auch in "Leichte Sprache" übersetzen. Leichte Sprache ist ein feststehender Begriff für eine stark vereinfachte Sprache und Grammatik. Sie definiert sich durch kurze Sätze mit jeweils nur einer Aussage pro Satz. Es werden möglichst kurze und einfache Begriffe verwendet, schwierige Vokabeln werden sofort im Text erklärt. 

Zusammengesetzte Wörter werden mit Bindestrichen getrennt, also z. B. "Binde-Strich". Zudem wird auf typografische Feinheiten wie Silbentrennung und Initiale zugunsten der besseren Lesbarkeit verzichtet. Leichte Sprache unterscheidet sich also deutlich von einfacher Sprache und Umgangssprache. Sie ist speziell auf eine Zielgruppe abgestimmt, die größere Schwierigkeiten beim Lesen und Erfassen von Texten hat. Eine komplette Webseite in ausschließlich Leichter Sprache würde allerdings seltsam wirken und wäre für die meisten ungewohnt zu lesen.

Leichte Sprache ist daher wie eine Fremdsprache zu behandeln. Das heißt für unser Webprojekt, dass wir zwei Sprachversionen eingerichtet haben, mit einem klassischen Sprachumschalter. Wichtig war uns, dass die Seiten komplett in Leichte Sprache übersetzt werden und dabei nicht nur aus ein paar eingedampften Absätzen bestehen.

Barrierefreiheit bedeutet auch, sämtliche Informationen für jeden zugänglich zu machen, nicht nur einen Teil. Die OWB bildete aus den Reihen der Werkstattmitarbeiter eine Arbeitsgruppe "Leichte Sprache", die unsere Texte prüfte und hilfreiche Verbesserungsvorschläge gab. So konnten wir uns sicher sein, dass die fertigen Texte von der Hauptzielgruppe gut verstanden werden können.

Vorlesesoftware

Um den Besuchern der Seite das Erfassen der Texte weiter zu erleichtern, bauten wir die Vorlesesoftware ReadSpeaker ein. Hierbei ist zu beachten, dass der Einsatz einer Vorlesesoftware Webentwickler nicht davon entbindet, ihr Projekt für Menschen mit Sehbehinderungen zugänglich zu machen. 

Eine Vorlesesoftware deckt nicht den gesamten Funktionsumfang eines Screenreaders ab, bietet also z. B. keine Möglichkeiten, innerhalb der Seite oder zwischen einzelnen Browserfenstern zu navigieren. Screenreader werden betriebssystemweit und mit einer irrwitzigen Lesegeschwindigkeit verwendet. Für einen blinden Menschen wäre der Wechsel zu einer Vorlesesoftware wie ReadSpeaker so, als ob Sebastian Vettel im Linienbus dahertuckern müsste.

Für unsere Zielgruppe der Menschen mit Lernschwierigkeiten jedoch ist ReadSpeaker eine gute Hilfe beim Erlesen der Texte. Nach einem Klick auf ein Lautsprechersymbol liest ReadSpeaker die Seite oder den jeweiligen Abschnitt vor. Einzelne Sätze und Wörter können separat vorgelesen werden. 

Der Nutzer wählt dabei zwischen drei Lesegeschwindigkeiten. Der jeweils aktive Satz und das aktuell vorgelesene Wort werden farbig hinterlegt, sodass der Leser sich jederzeit im Text orientieren kann. Unsere Testpersonen kamen sehr gut mit dem ReadSpeaker zurecht und empfanden die Vorlesefunktion als hilfreich.

Technisch binden Sie als Frontendentwickler lediglich ein Javascript ein und legen auf den vorzulesenden Teil der Seite - also meist den eigentlichen Inhaltsbereich - eine Klasse.

So vermeiden Sie, dass andere Seitenelemente wie Navigation oder Werbung vorgelesen werden. Sie können beliebig viele Instanzen auf einer Seite verwenden, sodass Sie einzelne Elemente wie z. B. Teaser separat vorlesen lassen können. Die aktuelle Version des ReadSpeaker basiert nicht mehr auf Flash und ist damit auch mit iPad, iPhone und neueren Android-Geräten kompatibel. Flash wird lediglich noch als Fallback verwendet.

ReadSpeaker unterstützt eine Vielzahl von Sprachen, die Lesestimme klingt angenehm. Feedback über fehlerhafte Aussprache einzelner Wörter wird vom persönlichen Serviceberater gern aufgenommen, und die Aussprache wird zeitnah - oft bereits über Nacht - korrigiert. Eine klare Empfehlung!

Videos und Untertitel

Zurzeit entstehen fortlaufend kleine Image-Filme über einzelne Bereiche der OWB, die wir in die Webseite einbinden. Bei der Frage nach der Plattform fiel unsere Wahl auf YouTube, da hier im Gegensatz zu Vimeo und anderen Anbietern die Möglichkeit besteht, die Videos zu untertiteln.

Bei der Videountertitelung werden "open captions" und "closed captions" unterschieden. Anders als der Begriff "open" vermuten lässt, sind open captions nicht das Mittel der Wahl. Es handelt sich hierbei um Untertitel, die fest in die Bildinformation eingerechnet sind. Sie sind immer sichtbar, lassen sich nicht abschalten und sind nicht maschinenlesbar.

Anders die closed captions: Hier liegt eine separate Textdatei vor, die lediglich mit dem Video synchronisiert wird. Untertitel lassen sich so beliebig zu- oder abschalten, es sind mehrere Sprachversionen möglich, und die Texte sind maschinenlesbar. Außerdem erhalten Sie automatisch ein komplettes Transkript, das auf YouTube beim Anschauen des Videos in Echtzeit angezeigt wird. Einzelne Zeilen lassen sich anklicken, damit springen Sie zur betreffenden Stelle im Video. YouTube stellt zudem eine Funktion zur Verfügung, Videos automatisch untertiteln zu lassen - zugegebenermaßen (noch) mit unterschiedlichen Ergebnissen.

Bei unseren Videos klappte das überraschend gut; trotz schwäbischer Mundart hatten wir vergleichsweise wenig nachzubessern. Meistens handelte es sich dabei um Eigennamen, Abkürzungen und umgangssprachliche Ausdrücke. Die Nachbesserung der Untertitel in YouTube gestaltet sich äußerst komfortabel: Der eingeloggte Nutzer kann die Texte seines Videos direkt beim Betrachten in Echtzeit korrigieren und bei Bedarf auch die Zeiten anpassen. Videountertitel müssen also keinesfalls eine Frage des Budgets sein.

Alternativtexte

Je mehr die Wirkung einer Webseite auf dem Bildmaterial basiert, umso wichtiger werden die Alternativtexte. Schaut die Person fröhlich? Ist die Maschine, an der die Person arbeitet, groß oder klein? All dies sind wichtige Informationen, um die Aussage der Webseite zu unterstützen. Wer bis hierher in die Inhalte investiert hat, sollte bei den Alternativtexten nicht aufhören.

Das Argument, Blinde gehörten nicht zur Zielgruppe, zählt übrigens nicht. Erstens entscheiden weder Webentwickler noch Auftraggeber, wofür sich ein blinder Mensch zu interessieren hat. Zweitens könnten Sie selbst morgen blind sein und würden dann trotzdem gern noch zur einen oder anderen Zielgruppe gehören.

Übrigens liest ReadSpeaker - genau wie die "echten" Screenreader - Alternativtexte vor. Dies kann auch bei sehenden Personen zum besseren Verständnis der Fotos beitragen.

Der Launch. Und dann?

Nach monatelanger Arbeit folgt endlich die finale Freigabe, der Launch, die CMS-Schulung - und dann die Übergabe der Zugangsdaten an die zukünftigen Redakteure. Schnell vorher noch ein paar Screenshots machen!

In der Tat ist es eine große Herausforderung, das einmal Erreichte dauerhaft in gleicher Qualität fortzuführen. Da sind die Texte, die in beiden Sprachversionen parallel gepflegt werden müssen. Da ist die durchdachte Bildsprache und das eine Foto, das Sie so gern auf der Seite sehen würden, das aber gar nicht dazu passt. Und dann muss rasch ein neues Video online gehen - die Untertitel kann man ja später machen. Ein Schwerpunkt jeder Schulung muss daher sein, ein klares Verständnis für Sinn und Zweck jeder einzelnen Komponente der Webseite zu wecken.

Technische Fragen bezüglich des CMS sind dagegen nicht halb so wichtig, da diese kurz telefonisch oder per Mail geklärt werden können. Eine gute Lösung ist, einen Dienstvertrag über ein Stundenkontingent mit dem Kunden zu schließen, innerhalb dessen Sie regelmäßig über die Webseite schauen und den Redakteuren Tipps geben oder selbst kleine Nachbesserungen vornehmen. 

Ohne fortlaufende Qualitätssicherung ist eine einst barrierefreie Webseite sonst nach einer Weile nicht mehr wiederzuerkennen, da sich "weiche" Faktoren wie passende Bildsprache oder Qualität der Alternativtexte nicht automatisiert testen lassen.