Die Website barrierefrei(er) gestalten

Wie muss eine Website aussehen, damit sie ohne Hürden zu bedienen ist? Egal ob für Menschen mit oder ohne Behinderung. 

Barrierefreiheit auf einer Website: Websites barrierefrei zu gestalten hilft Menschen mit Behinderung, älteren Leuten und auch allen anderen Website-Besuchern, sich auf der Website zurechzufinden

Bei Barrierefreiheit denkt man oft zunächst an hohe Bürgersteige oder an Blindenampeln. Aber Barrierefreiheit spielt auch im Internet eine große Rolle. Wie Sie ihre Website barrierefrei für Menschen mit und ohne Behinderung gestalten können, erfahren Sie hier

Das Internet ermöglicht jedem Zugang zu Wissen, Bildung, Unterhaltung und Information. Gerade Menschen mit Einschränkungen oder Behinderungen erhalten so vielfältige Möglichkeiten für den Alltag, die Freizeitgestaltung und auf dem Arbeitsmarkt. Umso auffälliger ist es, dass viele Websites gerade für diese Menschen nur schwer oder gar nicht nutzbar sind.

Was bedeutet Barrierefreiheit im Internet?

Die Barrierefreiheit spielt also auch im Netz eine große Rolle. Barrierefreiheit bedeutet in diesem Zusammenhang, dass Menschen mit Behinderung, Einschränkung oder ältere Menschen die Angebote im Internet wahrnehmen, verstehen, bedienen und mit ihnen interagieren und sie mitgestalten können. Daher ist es wichtig, jede Website so barrierearm wie möglich anzubieten.

Das Thema Barrierefreiheit kann auch im Bereich Websitegestaltung je nach technischen Gegebenheiten sehr umfangreich sein, so dass wir Ihnen an dieser Stelle nur einen kleinen Überblick geben können. Die folgenden Tipps und Hinweise können Sie als Web-Master in Ihrem Redaktionssystem selbst umsetzen. Damit wird Ihre Website nicht zu 100 % barrierefrei, aber es ist ein erster Schritt. Für weitere Informationen finden Sie im Text sowie am Ende des Artikels Links zu Seiten, die das Thema weiter ausführlich behandeln.


Vorteile einer barrierefreien Website

Barrierefrei eine Website aufzubauen, bringt viele Vorteile mit sich. Neben Menschen mit Behinderung profitieren auch alle anderen von einem Internetauftritt ohne Barrieren

1. Nutzerfreundlichere Website für alle – dank Barrierefreiheit

Barrierefreiheit im Internet bietet mit seinen Kriterien wie Übersichtlichkeit, Verständlichkeit und einfache Bedienbarkeit auch eine Vielzahl von Vorteilen für alle Nutzer. Pauschal lässt sich also sagen: Eine barrierefreie Website ist eine nutzerfreundliche Website – und das ist das oberste Ziel bei der Gestaltung eines Internetauftritts.

2. Barrierefreiheit auf der Website dient auch der Suchmaschinenoptimierung

Was man zunächst nicht vermuten könnte: Suchmaschinenoptimierung (SEO) und Barrierefreiheit sind eng miteinander verbunden. Denn bei der Suchmaschinenoptimierung soll Google und Co. die Auffindbarkeit der Seite erleichtert werden. Im zweiten Schritt kann den Suchmaschinen beispielsweise durch Schlagwörter im Text und Bildbeschreibungen erkennbar gemacht werden, um welche Inhalte es auf der Seite geht. Denn die Suchroboter weisen ihrerseits einige Einschränkungen auf: sie können keine Bilder sehen, sind also „blind“ und das Verständnis für den Inhalt ist sehr begrenzt. Wenn eine Webseite also barrierefrei gestaltet wird, dient das neben der erleichterten Bedienung für uns Menschen auch der Suchmaschinenoptimierung. So können Sie zwei Fliegen mit einer Klappe schlagen.

3. Imagepflege durch Engagement für Barrierefreiheit

Das Thema Barrierefreiheit gewinnt immer mehr an Bedeutung, da es neben Menschen mit Behinderung auch ältere Personen betrifft. Durch die Bemühungen um einen barrierefreien Auftritt können Sie mit ihrer Gemeinde oder Einrichtung deutlich machen, dass Sie alle Menschen im Blick haben und niemanden ausschließen möchten.


So gestalten Sie Ihre Website barrierefrei(er)

Übersichtliche und verständliche Struktur

Übersichtlichkeit und eine verständliche Navigation erleichtern das Surfen auf der Website ohne Barrieren

Der Struktur einer Website kommt eine zentrale Bedeutung für die Barrierefreiheit zu. Der Absender, also die Identität, und der Auftrag der Website müssen jederzeit deutlich sein, so dass dem Website-Besucher klar ist, auf welcher Seite er sich befindet und welche Informationen hier zu finden sind. Das Menü sollte daher übersichtlich sein und nicht mehr als 5 – 7 Menüpunkte erhalten. Diese sollten kurz, verständlich und eindeutig formuliert sein.

Alle Inhalte sollten innerhalb weniger Klicks erreichbar sein. Auf den Seiten selbst helfen klare Strukturen beim Zurechtfinden und Sortieren des Inhalts. Achten Sie beispielsweise auf einen standardisierten Seitenaufbau in Überschriften, Absätze, Zwischenüberschriften und – wo sinnvoll – Aufzählungen. Verzichten Sie außerdem auf Tabellen auf der Website. Tabellen führen immer wieder zu Problemen in der Darstellung, insbesondere auf mobilen Endgeräten. Auch die Bedienbarkeit der Seiten für Menschen mit Sehbehinderung wird durch Tabellen verschlechtert. Viele Inhalte lassen sich auch durch gute Formatierung und Strukturierung ansprechend und übersichtlich darstellen.


Alternativ-Texte bei Bildern ausfüllen

Der Alt-Text ist wichtig, damit Menschen mit Sehbehinderung die Inhalte von Bilder auslesen lassen könnenMenschen mit einer Sehbehinderung nutzen auf Websites Screenreader, also Softwares, die die Bildschirmdarstellung vorlesen oder taktil über eine Braillezeile wiedergegeben. Die Softwares können aber – ähnlich wie Suchmaschinen – keine Bilder erkennen oder das grafisch dargestellte in Wort oder Schrift „übersetzen“.

Der Alternativ-Text (oder kurz Alt-Text) können Sie im Content-Management-System (CMS) Ihrer Website ausfüllen. Er wird auf der Website nicht sichtbar ausgegeben, aber von den Screenreadern erfasst und als Seiteninhalt vorgelesen. Wenn Sie den Alt-Text mit einer kurzen Bildbeschreibung versehen, können Sie so Menschen mit Sehbehinderung den Inhalt eines Bildes näher bringen.

Bei Schmuckbildern, also Bilder die nur eine schmückende und keine informative Funktion haben, empfehlen wir eine Kombination aus Bildbeschreibung und einem Bezug zum Inhalt des Artikels. So wäre in unten stehendem Beispiel die alleinige Information „Junge schaut auf Tablet“, die im Alt-Text vom Screenreader vorgelesen wird, vermutlich wenig aussagekräftig. Ein anschließender, ergänzender Satz schafft eine Verbindung zum Inhalt.

Beispiele für Alternativ-Text im Backend:

Ein weiterer Vorteil des Alt-Textes: Kann das Bild der Website von Besuchern nicht oder nur verzögert geladen werden (beispielsweise aufgrund einer schwachen Internetverbindung), wird anstelle des Bildes der Alt-Text ausgegeben. Zusätzlich ist der Alt-Text ein wichtiger Indikator für Suchmaschinen, die Bilder ebenfalls nicht „lesen“ können und daher auf einen beschreibenden Alt-Text angewiesen sind.

Wichtige Informationen sollten Sie immer im Fließtext und nicht nur als reine Grafik-Datei in Form eines Flyers oder ähnliches auf der Website darstellen.

 


Achten Sie auf ausreichend Farbkontraste

Für Menschen mit Sehbehinderung und alte Menschen sind ausreichend Kontraste auf der Website wichtig für die Barrierefreiheit

Die Schrift sollte sich zum Hintergrund deutlich abheben. Wenn schwache Farbkontraste verwendet werden, kann es leicht dazu kommen, dass diese Information aufgrund einer Sehbehinderung, Gegenlicht oder eines schlecht eingestellten Computerbildschirms verloren geht. Dadurch können Barrieren bei der Wahrnehmung einer Webseite entstehen.


Leichte oder Einfache Sprache verwenden

Leichte Sprache dient der Barrierefreiheit durch leichte uns bessere Verständlichkeit

Sprache kann zur Barriere für das Verständnis werden. Laut einer Studie der Universität Hamburg aus dem Jahr 2010 leben in Deutschland 7,5 Millionen funktionale Analphabeten, also Menschen, die nicht in der Lage sind, aus vermeintlich einfachen Sätzen einen Sinn herauszulesen. Dazu kommen noch einmal 13 Millionen Menschen, die nie das Rechtschreib- und Leseniveau einer 4. Klasse erreicht haben (siehe „Gar nicht so leicht“ – FAZ).

Diese Personengruppen benötigen genau wie Demenz-Kranke, Flüchtlinge und Menschen mit Problemen mit dem Sprachverständnis aufgrund angeborener Gehörlosigkeit statt „schwerer“ die „Leichte Sprache“ für ein besseres Verständnis. Denken Sie beim Formulieren von Texten, Menüpunkten und Bildunterschriften an Menschen mit besonderen Anforderungen.

Zur schweren Sprache gehören beispielsweise:

  • Fremdwörter
  • Fachwörter
  • Lange Sätze

Was leicht klingt, kann beim Schreiben aufgrund eigener Regeln für die Leichte Sprache schwer werden. Das Regelwerk für die Leichte Sprache wird vom „Netzwerk Leichte Sprache“ herausgegeben. Es umfasst neben Sprachregeln auch Rechtschreibregeln sowie Empfehlungen zu Typografie und Mediengebrauch. Hier ein paar Beispiele für die Regeln der Leichten Sprache:

  • Benutzen Sie einfache Wörter.
  • Benutzen Sie Wörter, die etwas genau beschreiben.
  • Verzichten Sie auf Fach- und Fremdwörter und Abkürzungen.
  • Benutzen Sie kurze Wörter oder trennen Sie lange Wörter mit einem Binde-Strich, damit man die Wörter besser lesen kann.
  • Benutzen Sie Verben und aktive Wörter.
  • Vermeiden Sie Genitiv und Konjunktiv.
  • Benutzen Sie positive Sprache.
  • Benutzen Sie immer die gleichen Wörter für die gleichen Dinge.

Der Leichten Sprache liegt also ein eigenes Regelwerk zugrunde, das sich von der Normalsprache deutlich unterscheidet, beispielsweise bei Trennstriche bei zusammengesetzten Wörtern oder zusätzlichen Absätzen im Text. Die „Einfache Sprache“ hingegen vermeidet komplizierte Formulierungen und macht einen normalsprachlichen Eindruck.

Leichte Sprache:

Erlaubt sind Satzellipsen, also unvollständige Sätze wie „Schlecht“ statt „Das ist schlecht“. Längere zusammengesetzte Namenwörter werden mit einem Bindestrich getrennt, etwa „Heim-Beirat“ statt „Heimbeirat“. Außerdem wird der Doppelpunkt gezielt als hinweisendes Signal eingesetzt.

Beispiele:
Schlecht: Morgen wird der Heim-Beirat gewählt.
Gut: Morgen wählen wir den Heim-Beirat.“

Einfache Sprache:

Einfache Sprache ist komplexer. Auch schwierigere Begriffe werden benutzt:
„Die Staaten sind dafür verantwortlich, dass Behinderte an der Entwicklung von allen Gesetzen beteiligt sind, die sich mit den Rechten und Pflichten von Behinderten beschäftigen.“

 

Quelle: Auszüge aus: Mensch zuerst (Anm. 1); B. I. Tronbacke (Anm. 9) aus Leichte und Einfache Sprache – Versuch einer Definition (Bundeszentrale für politische Bildung)

Eine Literaturliste mit Buch-Tipps und Ratgebern zur Leichten Sprache aus unserer Medienhaus-Bibliothek finden Sie hier »


Videos barrierefrei gestalten

Bei barrierefreien Videos gibt es viel zu beachten: Sie müssen Untertitel haben, eine Audiodeskription sowie einen Übersetzung in Gebärdesprache

Hier ein paar Tipps der „Aktion Mensch“, wie sich Videos barrierefrei gestalten lassen:

Ein komplett barrierefreies Video besteht aus einem Film mit:

  • Untertiteln: Menschen, die nicht oder nur eingeschränkt hören können, nutzen die Untertitel – eine Übersetzung des im Video Gesprochenen in Schrift, die am unteren Bildrand angezeigt wird.
  • Audiodeskription: Menschen, die nicht oder nur schlecht sehen können, nutzen die Audiodeskription – eine Tonspur, die sich zum Video hinzuschalten lässt und all das, was der Nutzer nicht sehen kann, mit Worten beschreibt.
  • und einer Übersetzung in Gebärdensprache: Menschen, die gehörlos sind und nicht gut oder gar nicht lesen können, nutzen die Gebärdensprache – sie lässt sich als extra Video zum Film hinzuschalten. Ein Mensch übersetzt den gesamten Video-Inhalt in Gebärdensprache.

Die „Aktion Mensch“ hat einen Video-Player entwickelt, mit dem die Einbindung barrierefreier Videos optimal möglich ist.Die Videos müssen dafür barrierefrei vorliegen.


Barrieren selbst nachvollziehen

Um eine Website barrierefrei gestalten zu können, hilft es, Barrieren nachzuvollziehen

Das Internetportal einfach-barrierefrei.net schlägt vor, beim Umsetzen der Barrierefreiheit auf der Website nicht nur die formalen Kriterien im Hinterkopf zu behalten, sondern die Barrieren selbst versuchen nachzuempfinden:

  • Texte auf „Einfache Sprache“ überprüfen: Ist kurz, aktiv und verständlich formuliert? Lassen Sie jemanden „von Außen“ über Ihre Texte lesen und auf Verständnis überprüfen.
  • Schalten Sie die Bilder im Browser aus und kontrollieren Sie, ob Sie die Inhalte der Website auch ohne die grafischen Elemente gut verstehen. Im Firefox können Sie die Bilder eine Website wie folgt blockieren:
    • Klicken Sie auf ein Bild mit Rechtsklick
    • Wählen Sie „Grafik-Info anzeigen“
    • Detzen Sie das Häkchen bei „Grafiken von www.xy.de ausblenden“
    • Schließen Sie das Fenster und laden Sie die Seite neu.
    • Sie können die Bilder im Firefox anschließend wieder über die Adressbrowserzeile aufheben (über das Informationssymbol links neben der URL auf Bilder-Blockierung) .
  • Stellen Sie den Kontrast an Ihrem Computerbildschirm auf das Maximum. Sie werden erleben, wie graue Flächen plötzlich weiß werden und einzelne Elemente verschwinden.
  • Öffnen Sie die Webseite im Browser. Legen Sie die Maus zur Seite und bedienen sie die Webseite ausschließlich über die Tastatur, indem Sie sich über die Tab-Taste (Tabulatortaste) in der Website fortbewegen. Können Sie alle Menüpunkte, Unterseiten, Links, Downloads und Formularfelder mühelos erreichen? Oder stoßen Sie auf Barrieren?
  • Schalten Sie über eine Entwickler-Toolbar das CSS aus (mehr über das Developer Tool für Browser) und versuchen Sie, Ihre Webseite zu bedienen und den Inhalt zu verstehen.

Website auf Barrierefreiheit testen

Es gibt eine Reihe von Testwerkzeugen, die bei der Evaluation unterstützen. Allerdings wird empfohlen, mit erfahrenen menschlichen Testern zusammenzuarbeiten, um sicherzustellen, dass eine Website zugänglich ist. Fragen Sie beispielsweise bei einer örtlichen Stiftung, den Landesverbänden oder Behindertenverbänden an.


Weitere Informationen über Barrierefreiheit und Leichte Sprache:


Keine Tipps mehr verpassen und bequem per E-Mail zugeschickt bekommen:

⊗ 1 x pro Monat ⊗ jederzeit kündbar ⊗ Keine Datenweitergabe an Dritte

Newsletter-Anmeldung

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.
Der Newsletter wird über den Versanddienstleister CleverReach versendet, bei dem Ihre Daten nach Ihrer bestätigten Anmeldung gespeichert werden. Hinweise zum Anmeldeverfahren, Versanddienstleister, zur statistischen Auswertung und zum Widerruf finden Sie in unserer Datenschutzerklärung.

Inklusion für’s Smartphone mit Inklumojis

Inklusion für WhatsApp und Co. mit Inklumojis


Seminar-Tipps: Erfolgreiche Website erstellen, aufbauen und pflegen

Nadja Golitschek
Hallo, ich bin Online-Redakteurin im Evangelischen Medienhaus in Stuttgart. Hier schreibe ich rund um die Themen Internet und digitale Medien.
Nadja Golitschek

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.