01.09.21

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.

 
Nadja Golitschek

ehem. Managerin
Community

 
Die Website barrierefrei(er) gestalten

Bei Barrierefreiheit denkt man oft zunächst an hohe Bürgersteige oder an Blindenampeln. Aber Barrierefreiheit spielt auch im Internet eine große Rolle.

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.

lightbulb_outline Vorteile einer barrierefreien Website

1. Nutzerfreundlichere Website für alle – dank Barrierefreiheit

Barrierefreiheit im Internet bietet mit ihren 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 Website 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.

desktop_mac So gestalten Sie Ihre Website barrierefrei(er)

Übersichtliche und verständliche Struktur

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.

create Alternativ-Texte bei Bildern ausfüllen

Menschen mit einer Sehbehinderung nutzen auf Websites Screenreader, also Softwares, die die Bildschirmdarstellung vorlesen oder taktil über eine Braillezeile wiedergeben. Die Softwares können aber – ähnlich wie Suchmaschinen – keine Bilder erkennen oder das grafisch dargestellte in Wort oder Schrift „übersetzen“.

Den 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 im 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.

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 ähnlichem auf der Website darstellen.

brush Achten Sie auf ausreichend Farbkontraste

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.

chat_bubble Leichte oder Einfache Sprache verwenden

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 Trennstrichen, bei zusammengesetzten Wörtern oder zusätzlichen Absätzen im Text. Die „Einfache Sprache“ hingegen vermeidet komplizierte Formulierungen und macht einen normalsprachlichen Eindruck.

camera_alt Videos barrierefrei gestalten

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.

accessible Barrieren selbst nachvollziehen

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 selbst zu versuchen die Barrieren 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 einer Website wie folgt blockieren:
    • Klicken Sie auf ein Bild mit Rechtsklick
    • Wählen Sie „Grafik-Info anzeigen“
    • Setzen 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 Website im Browser. Legen Sie die Maus zur Seite und bedienen sie die Website 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 Website zu bedienen und den Inhalt zu verstehen.
  •  

done 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.

Das könnte Sie auch interessieren: