Barrierefreie Webseiten am Beispiel Sozialverband Hamburg

Was sind Barrierefreie Webseiten?

Barrierefrei bedeutet Zugänglichkeit für alle – den Begriff "Barrierefrei" kennen die meisten aus der physischen Welt und denken wahrscheinlich an Rampen für Rollstühle oder Aufzüge in der U-Bahn- die für Menschen mit Rollstühlen, mit Rollatoren, mit Gipsbein und Eltern mit Kinderwagen gedacht sind.

Barrierefreier Ausbau entfernt die Hindernisse, oder bietet alternative Wege für alle.

Auch Webseiten können barrierefrei gestaltet werden: Informationen sollen auffindbar, zugänglich und nutzbar sein – für alle, also explizit auch, wenn eine körperliche Einschränkung vorliegt.

Für das Design von Webseiten bedeutet das z.B.:

  • Klare Schriften und Kontraste
  • Große Bedienflächen
  • semantische Strukturen

Sowie eine Menge technische Dinge, die ein Programmierer einer barrierefreien Webseite beachten muss.

Wer ist die Zielgruppe?

Es gibt sehr viele unterschiedliche Einschränkungen, eigentlich kann man kaum über Barrierefreiheit sprechen, ohne weiter auszudifferenzieren.

Am häufigsten dürfte die Rot-Grün-Sehschwäche verbreitet sein- immerhin 9% (!) aller Männer sind betroffen. Ein gutes Design vermeidet daher schon entsprechenden Farben miteinander zu kombinieren.

Rot-Grün-Sehschwache sehen hier ausschließlich eine 17, Normalsichtige erkennen auch eine 47

Auflösung für Betroffene: Rot-Grün-Sehschwache sehen die hier blau markierten Felder im Originalbild in derselben Farbe wie den Hintergrund, Normalsichtige können hingegen den Farbunterschied erkennen

Beispiel: Korrekter Aufbau von Tabellen

Kinder
Erwachsene
1 Euro
3 Euro

Intuitiv ist klar, was gemeint ist: Kinder 1 EUR, Erwachsene 3 EUR.

Was aber, wenn eine Benutzer sich die Tabelle vorlesen lässt, also einen sog. Screenreader nutzt? Ein Screenreader würde ja von links nach rechts vorlesen, also:

Kinder - Erwachsene - 1 EUR - 3 EUR

Barrierfrei wäre es, dem Screenreader (versteckte) Tipps zu geben, wie die Inhalte besser vorgelesen werden kann:

Kinder - 1 EUR - Erwachsene - 3 EUR

 

Eine weitere Nutzung der Vorlesefunktion sind Hörgeräte. Ein modernes Hörgerät ist per Bluetooth an das Handy gekoppelt. Das Hörgerät spielt Musik und Podcasts, man kann mit dem Hörgerät telefonieren und es liest Webseiten vor.

Beispiel: Navigation ohne Maus

Eine weitere Anforderung: Navigation und Formulare sollten ohne Maus, stattdessen mit der Tab-Taste navigierbar sein. In erster Linie gedacht für Menschen, die nicht einfach eine Maus oder ein Touchpad bedienen können.

Übrrigens: Sie können das selbst leicht probieren- einfach bei einer Webseite mit der Tab-Taste navigieren.

Nutzung der Webseite mit der Tab Taste.
Auch moderne Technik nutzt diese Funktion: Die Datenbrille Google Glass setzt auf die Navigation durch klopfen auf den Brillenbügel - tapp tapp tapp - so navigiert man mit einer Datenbrille durch eine Webseite.
Elke Bövers

Den Inhalt strukturieren

Die Programmierung barrierefreier Webseite ist die eine Hälfte der Arbeit. Eine barrierefreie Aufbereitung des Inhalts in Wort, Bild und Film die andere.

Eine Webseite ist nicht automatisch barrierefrei, sobald die Technik steht. Der Redakteur muss seinen Teil der Arbeit beitragen.

Anforderungen an den Inhalt sind:

  • Eine klare Strukturierung der Überschriften
  • Eine textuelle Beschreibung von Bildern und Videos
  • Leichte Sprache

Beispiel: Leichte Sprache – Sozialverband Hamburg

Zur Barrierefreiheit gehört auch die Verwendung leichter Sprache, also so schreiben, dass es sehr viele verstehen:

  • Kurze Sätze (nicht mehr als 12 Wörter)
  • Keine Kindersprache
  • Keine Fremdwörter oder Fachbegriffe (wenn doch, muss man das Fremdwort erklären)
  • Tätigkeitsworte / Verben verwenden
  • Nur eine Information pro Satz
  • Keine Abkürzungen
  • Keine langen Wörter (Lange Wörter zum Beispiel mit einem Medion·punkt trennen)

Quelle: https://hurraki.de/wiki/Leichte_Sprache  Hurraki, das Online Wörterbuch für Leichte Sprache. 

Der Sozialverband Hamburg behandelt die Leichte Sprache als "Sprache" und hat eine Übersetzungsagentur beauftragt die Texte in Leichte Sprache zu übersetzen. Neben jedem komplexeren Beitrag befindet sich das Symbol für Leichte Sprache, der Leser kann jederzeit zur Leichten Sprache umschalten. 

Leichte Sprache - aber richtig

Auf der Webseite des Sozialverbands Hamburg kann man die einzelnen Inhalte auf Leichte Sprache umschalten.


An diesem Beispiel sieht man zwei Dinge:

Die Formulierung von Inhalten in Leichter Sprache ist nicht einfach.

Es gibt spezielle Übersetzungsagenturen, die sich auf Leichte Sprache fokussiert haben.
Die meisten Betreiber von Webseiten scheuen den Aufwand und bieten für eine 100 Seiten starke Website genau eine Alternativseite in Leichter Sprache an. Das wird dem Anspruch der Barrierefreiheit aber nicht gerecht.

Auch die Leichte Sprache braucht Technik.

  • Zum Text gehört ein illustrierendes Bild und das Bild darf nicht irgendwo sein, sondern an der Stelle, wo es den Text unterstützt. Dieses Bild darf auch in verschiedenen Bildschirmgrößen, auf unterschiedlichen Geräten und mobil nicht verrutschen und plötzlich über oder unter dem Textabschnitt stehen. TYPO3 hat so etwas in dieser Form nicht angeboten - hier musste ein spezielles Element entwickelt werden.
  • Die Texte hinter den zwei Reitern sind unterschiedlich lang. Meist braucht die Leichte Sprache mit den Illustrationen mehr Platz. Die Gestaltung und das Template sollte das einplanen.

Leichte Sprache hilft Menschen mit mentalen Beeinträchtigungen und allen, die die Deutsche Sprache grade lernen.

Bei komplexeren Zusammenhängen oder unübersichtlichem Inhalt hilft es allen. Wir empfehlen unten eine Reihe von Seiten in Leichter Sprache, z.B. Parteiprogramme oder Artikel über neue Technologien oder Künstliche Intelligenz in der Brand Eins als Beispiele.

Elke Böwers
Barrierarme Webeiten so umzusetzen, dass es zur Zielgruppe der Webseite passt, ist sehr zu empfehlen. Viel zu oft wird aus Unwissenheit darauf verzichtet.
Elke Bövers, Projektmanagement

Leichte Sprache so umfassend auf einer Webseite abzubilden war eine Herausforderung, die uns Erfahrungen gebracht hat, die wir in weiteren Projekten immer wieder anwenden können. Das Wissen nutzen wir heute in der Beratung unserer Kunden - insbesondere im öffentlichen Bereich.

Die Webseite des Sozialverbands Hamburg ist ein spannendes Projekt, dass unsere Agentur bereichert hat.

Erfahrung zählt

hauptsache.net beschäftigt sich seit vielen Jahren mit dem Thema barrierefreie Webseiten. Bereits 2013 erstellten wir eine Seite für die Landeszentrale für politische Bildung in Hamburg, die barrierfrei sein sollte.

 Die von uns erstellte Seite "Gedenkstätten in Hamburg" hat beispielsweise im Test "Barrierefreiheit von informationsorientierten Webangeboten" 99,5 von 100 Punkten erreicht (sehr gut zugänglich).

Weitere Seiten mit Leichter Sprache