Ein Piktogramm einer menschlichen Figur, die einen Knopf drückt, auf dem ein Rollstuhl abgebildet ist.
Die richtigen Knöpfe zur barrierefreien Webseite drücken.

Barrierefreie Webseiten

Eine Webseite ist mehr als nur die sichtbaren Inhalte. Für viele Nutzende reicht es nicht aus, wenn eine Webseite mehr oder minder schön im Browser lesbar ist. Es braucht aktive Handlungen von Menschen, die Inhalte produzieren, sodass auch Menschen mit Behinderungen vollständig und insbesondere ohne Abstriche eine DRK-Seite besuchen und auch nutzen können.

Im vergangenen Monat veröffentlichten wir zwei Beiträge im DRK-Wohlfahrt Blog zum Thema Barrierefreiheit / Menschen mit Behinderungen. Einerseits antwortetet Joß Steinke, Bereichsleiter für Jugend und Wohlfahrtspflege, mit „Wie können Wohlfahrtsverbände und die Menschen mit Behinderung gemeinsam neue Wege gehen?“ auf den kritischen Text von Raul Krauthausen „Die Lügen der Wohlfahrtspflege.“ Andererseits tauchte meine Kollegin aus den Kompetenzzentren Digitalisierung Anna-Lena Kose in ihrem Gespräch mit Prof. Dr. Christiane Maaß in eine praktische Umsetzung und die Bedeutung von Barrierefreiheit im Internet ein.

Daran anknüpfend möchte ich Ihnen die praktischen Handreichungen für eine barrierefreie Gestaltung von Inhalten im Internet vorstellen. Wie können auch wir unsere Webseiten, Anwendungen und Beiträge barrierefrei gestalten? Wie bereits von Anna-Lena Kose vorgestellt, gibt es gesetzliche Rahmenbedingungen, die insbesondere öffentliche Stellen des Bundes in diesem und den kommenden Jahren dazu verpflichten, ihre Inhalte vollständig barrierefrei zu gestalten.

Lassen Sie uns dazu kurz in das Gesetz zur Gleichstellung von Menschen mit Behinderungen (BGG) blicken und die notwendigen Handlungsfelder unter die Lupe nehmen: Mit dem BGG werden öffentliche Stellen des Bundes dazu verpflichtet, bis zum 23.06.2021 ihre Webseiten, mobilen Anwendungen und ihr Intranet barrierefrei zu gestalten. Bereits jetzt (bis zum 23.09.2020) ist eine Erklärung zur Barrierefreiheit einzufügen, wo neben Ansprechpersonen und Hinweise zum Schlichtungsverfahren auch alle noch nicht barrierefreien Inhalte aufgelistet werden müssen.

Lassen Sie uns also diesen Rechtstext als Anlass nehmen, um auch unsere eigenen Handlungen zu überprüfen – auch wenn das DRK keine öffentliche Stelle des Bundes ist, so möchten wir unsere Inhalte auch möglichst allen Besucherinnen und Besuchern barrierefrei zur Verfügung stellen.

Was müssen wir also tun, damit unsere Seite barrierefrei ist und auch bleibt?

Jetzt wird’s technisch. Hier wichtige Elemente zur Seitengestaltung, zu Alternativtexten und persönliche Hinweise, sodass unsere Seiten und digitalen Angebote barrierefrei sind. Im Text wird laufend auf Quellen für weitere Hinweise verwiesen, dort finden sich auch Methoden, einzelne Elemente im Browser hervorzuheben, um selbst zu testen.

Webseiten: Der Titel einer Webseite sollte aussagekräftig sein, also nicht nur den Namen der Webseite enthalten, sondern auch den Inhalt kurz beschreiben. Zu erkennen ist dies einfach, wenn man eine Seite als Lesezeichen im Browser speichert. Steht hier nur „DRK Webseite“ oder „Barrierefreie Webseiten– Blog – DRK Wohlfahrtspflege“? Ähnliches gilt auch für Webseiten-Links, die Nutzende weiterleiten. Es ist wenig hilfreich, wenn ein Link eine bunte Zahlen- und Buchstabenfolge ist. Der DRK-Wohlfahrts Blog funktioniert hier als ein positives Beispiel „…blog/eintrag/barrierefreie-webseiten/“. Sollte dies nicht möglich sein, weil der Link z.B. automatisiert erstellt wurde, dann sollte der umliegende Text diesen Link beschreiben, sodass man weiß, wohin man bei einem Klick gelangt. Die Weiterleitung in andere Dateiformate wie PDFs oder Word-Dokumente sollte ebenfalls im Link abgebildet oder angekündigt werden. So wissen die Nutzenden, was auf sie zukommt. Bei der Prüfung unserer eigenen Webseite wurden wir auch darauf hingewiesen, dass das Öffnen von Links in neuen Fenstern nicht barrierefrei ist. Also lieber im aktuellen Tab öffnen als in einem neuen.

Bedienung: Die Webseite sollte eine Vorlese-Funktion haben. Die Webseite muss auch ohne Maus bedienbar sein. Der Ausbau der Seite muss klar hierarchisiert sein, also die Überschriften sich fortsetzen und nicht von ganz groß zu ganz klein springen. Es braucht einen stringenten Aufbau und keine Lücken – sprich, auch keine leeren Inhalte oder Elemente ohne Beschriftung. Um den Aufbau und die Hierarchie bei Überschriften zu überprüfen, nutze ich die Browser-Erweiterung headingMaps. Für Registrierungen und ähnliche Dateneingaben verwenden viele Webseiten noch s.g. CAPTCHAs – hier braucht es auch Alternativen, da Blinde und höreingeschränkte bzw. sehbehinderte Nutzende diese Puzzle- / Wortspiele nur begrenzt nutzen können.

Bilder und Fotos: Neben der Nennung der Urheberin bzw. des Urhebers sollte es normal werden, einem Bild mit „informativem Inhalt“ einen Alternativtext zu geben. Sprich, den Inhalt des Bildes / Fotos zu beschreiben. Komplexe Grafiken und Organigramme können dort natürlich kaum lang und breit beschrieben werden, diese sollten dafür im dazugehörigen Text erläutert werden. Auch eine kleine Grafik wie „Hier weiterlesen“ muss einen Alternativtext haben, damit auch jenen Nutzenden der Inhalt eines solchen Bildes klar wird. Bei Layoutgrafiken wie Abstandshaltern, Trennern und rein dekorativen Fotos kann man den Alternativtext leer lassen, dann überspringen Screenreader in der Regel das Bild. Leer heißt nicht ohne. Denn wenn bei der Realisierung kein leeres „alt-Attribut“ vorhanden ist, wird der Dateiname vorgelesen. – Also dann: Jetzt all die Fotos, die weder dekorativ noch Layoutgrafiken sind, mit einem Alternativtext versehen!

Das WWW-Consortium fasst es klar und eindeutig zusammen: Alternativtexte sollen denselben Zweck erfüllen wie das Bild. Also wenn das Foto als solches für sich steht, dann reicht die Beschreibung. Wenn aber auch mit dem Foto impliziert wird, dass man auf dieses für weitere Informationen klicken soll, dann gehört auch das in den Alternativtext.

Ich lasse mir Alternativtexte z.B. durch die Browser-Erweiterung Web Developer anzeigen. Ein sehr umfassendes Werkzeug, dass bei der Entwicklung und Überprüfung von Webseiten Abhilfe schaffen kann.

Videos: Ich denke, hier steht außer Frage, dass alle Videos mit einer Tonspur auch Untertitel haben sollen. Dies unterstützt nicht nur Menschen mit Behinderung, sondern auch jene Zuschauenden, die nicht vollständig mit der Sprache des Videos vertraut sind. Man kann sich dabei aber nicht nur auf die Untertitel-Funktionen verlassen, denn diverse Plattformen bieten noch keine Möglichkeiten, Untertitel einzublenden. Hier sollten die Untertitel direkt ins Video eingebettet werden, so ist man immer auf der sicheren Seite. Auch über Bildgeschehen, das nicht über Dialoge vermittelt wird, aber für den Inhalt relevant ist, sollten jene Informationen für z.B. blinde Menschen in Audiotranskriptionen bzw. Untertiteln vorhanden sein.

Dies sind nur einige von vielen verschiedenen Maßnahmen, die wir umsetzen müssen, um unsere Webinhalte barrierefrei zu gestalten. Viele Bedien- und Steuerungselemente sind jedoch bereits inhärent in der Entwicklung der Webseite zu berücksichtigen. Hierbei empfiehlt es sich, dass die Aspekte der Barrierefreiheit von Beginn an und von Grund auf mitgedacht werden. Je nach Kompetenzen im eigenen Haus sollte man ggf. eine Überprüfung der Webseite durch externe Expertinnen und Experten vornehmen lassen. Gegebenenfalls kommt dann noch einiges an Arbeit auf Sie zu. Digitale Teilhabe hat aber nicht nur mit der Transformation von Leistungsangeboten der Wohlfahrtspflege zu tun, sondern bedeutet auch, sie in allen Aspekten der eigenen Webseitengestaltung und Online-Kommunikation mitzudenken.

Hilfreiche Links:

Eine der umfassendsten Prüflisten für die Barrierefreiheit ist der BITV Test der BIK. Hier finden Sie nicht nur die zu berücksichtigen Elemente, sondern auch Begründungen und Hintergrundinformationen zu einzelnen Punkten.

Die Bundesfachstelle Barrierefreiheit der Knappschaft Bahn See und des Bundes ist ein gutes Portal, dass auch immer mehr digitale Hilfestellungen und Erklärungen bereitstellt: Dazu klicken Sie hier.

Ein weiteres, sehr informatives Informationsportal mit vielen praktischen Erklärungen zur Umsetzung der digitalen Teilhabe ist https://www.netz-barrierefrei.de/

Jetzt noch 2 Beispiele für digitale Lösungen für den Alltag

Erstens, die Easy Reading Software ist eine Software, die benutzerfreundlich und nach personalisierter Einstellung die Inhalte einer Webseite anpassen kann. Begonnen bei Schriftgröße, Layout bis hin zu Übersetzungstätigkeiten richtet sich die Anwendung insbesondere an Menschen mit Behinderungen, die online aktiv sind.

Als Zweites möchte ich noch Wheelmap vorstellen: Eine Online-Karte, die rollstuhlgerechte Orte zusammenträgt, sodass Nutzende leicht ein beispielsweise passendes Restaurant finden können. Es ist ein Community-Projekt, wo neben professionellen Unternehmen auch alle Nutzenden selbstständig Orte auf der Karte eintragen können. Die App ist für Android und iOS verfügbar.

Gerne können Sie Ihre Erfahrungen und hilfreichsten Softwarelösungen in den Kommentaren hinterlegen, sodass auch wir unseren Wissensschatz erweitern können. Vielen Dank für’s Lesen und die barrierefreie Gestaltung Ihrer Webinhalte!

Landesverbände, Kreisverbände und Ortsverbände des Deutschen Roten Kreuz können sich über die Webseite drk-intern.de über Vorlagen, Muster und Hinweise zur Verbesserung und Einrichtung eigener Webpräsenzen informieren. Vielen Dank an die DRK-Service GmbH für Ihre Unterstützung.